Angularjs选择字段不显示选中

Question

我有一个像这样的角度指令：

'use strict';

angular.module('countrySelect', [])
  .directive('countrySelect', ['$parse', function($parse) {
    var countries = [
      { code: "af", name: "Afghanistan" },
      { code: "ax", name: "Åland Islands" },
      { code: "al", name: "Albania" },
      { code: "dz", name: "Algeria" },
    ];

    return {
      template: '<select ng-options="c.code as c.name for c in countries">',
      replace: true,
      link: function(scope, elem, attrs) {
        scope.countries = countries;

        if (!!attrs.ngModel) {
          var assignCountry = $parse(attrs.ngModel);

          elem.bind('change', function(e) {
            assignCountry(elem.val());
          });

          scope.$watch(attrs.ngModel, function(country) {
            elem.val(country);
          });
        }
      }
    }
  }]);

模板中的选择字段如下：

<div country-select ng-model="citizenship"></div>

我可以选择一个选项，模型会按预期使用国家代码更新，但国家名称不会出现在选择字段中，除非我再次选择它。

换句话说，过程进行

1. 点击
2. 选择国家
3. 型号已更新为国家代码，但名称未出现在选择字段中
4. 再次单击并选择
5. 名称出现在选择字段中

如何让选择字段在选择时显示国家名称？

Answer 1

由于您使用的是replace: true，原来的ng-model="citizenship" 无论如何都会在选择元素上结束，因此您不需要处理选择更改事件来更新ngModel，它已经绑定到选择框。所以你的指令应该是这样的：

angular.module('countrySelect', [])
.directive('countrySelect', [function() {
    var countries = [
        { code: "af", name: "Afghanistan" },
        { code: "ax", name: "Åland Islands" },
        { code: "al", name: "Albania" },
        { code: "dz", name: "Algeria" },
    ];

    return {
        template: '<select ng-options="c.code as c.name for c in countries"></select>',
        replace: true,
        link: function(scope, elem, attrs) {
            scope.countries = countries;
        }
    }
}]);

演示： http://plnkr.co/edit/9aBhrlIqPIGkGTNTwIb6?p=preview

Answer 2

您可能想使用$apply() 来“强制更新”视图。 http://jimhoskins.com/2012/12/17/angularjs-and-apply.html