使用箭头键盘而不是鼠标时，ng-options模型未更新-ng-optionsmodelnotupdatedwhenusearrowkeyboardinsteadofmouse

I Created js fiddle: Fiddle

我创造了js小提琴：小提琴

I create a form with some ng-options in it, and it have strange behavior when you use the button instead of mouse (just click on the textbox and press "tab" and you can select it using arrow key).

我创建了一个带有一些ng-options的表单，当你使用按钮而不是鼠标时它会有奇怪的行为（只需单击文本框并按“tab”，你就可以使用箭头键选择它）。

    
    
     
    
{{Info.Genre}}
    
{{Info.Program}}
    Submit this 

Javascript:

使用Javascript：

var theApp = angular.module("TheApp", []);

theApp.controller("MyApp", ['$scope', function($scope){
    $scope.Program = {"1":"Music","2":"Theater","3":"Comedy"};

    $scope.Genre = {"1":"Mystery", "2":"Thriller", "3":"Romance"};

    $scope.ChangeProgram = function(){
        alert($scope.Info.Program + " " + $scope.Info.Genre);
    }
    $scope.ChangeGenre = function (){
        console.log($scope.Info.Genre);

    }
    $scope.SendApp = function(){
        alert($scope.Info.Program + " " + $scope.Info.Genre);
    }
}]);

The ng-model are not updated when you select the first options on First try.

在第一次尝试时选择第一个选项时，不会更新ng模型。

What's Wrong, and How To Fix this?

什么是错的，以及如何解决这个问题？

Update:

As Mentioned on comment below, To reproduce, enter mouse into textfield, tab to combobox and try to select the second option (Thriller) using keyboard. This will fail on the first attempt, once the third or first option is selected, the second option is also recognized.

正如下面的评论中提到的，要重现，请将鼠标输入文本字段，选项卡到组合框并尝试使用键盘选择第二个选项（Thriller）。这将在第一次尝试时失败，一旦选择了第三个或第一个选项，也会识别第二个选项。

1 个解决方案

theApp.directive("select", function() {
    return {
      restrict: "E",
      require: "?ngModel",
      scope: false,
      link: function (scope, element, attrs, ngModel) {
        if (!ngModel) {
          return;
        }
        element.bind("keyup", function() {
          element.triggerHandler("change");
        })
      }
   }
})