Javascript Angularjs选择字段不显示选定项

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

'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>

“严格使用”；
角度。模块（'countrySelect'，[]）
.directive（'countrySelect'，['$parse'，function（$parse）{
var国家=[
{代号：“af”，名称：“阿富汗”}，
{代码：“ax”，名称：“奥兰群岛”}，
{代号：“al”，名称：“阿尔巴尼亚”}，
{代码：“dz”，名称：“阿尔及利亚”}，
];
返回{
模板：“”，
替换：正确，
链接：功能（范围、要素、属性）{
范围.国家=国家；
如果（！！attrs.ngModel）{
var assignCountry=$parse（attrs.ngModel）；
元素绑定（'change'，函数（e）{
转让国（elem.val（））；
});
范围：$watch（attrs.ngModel，function）（国家/地区）{
元素val（国家）；
});
}
}
}
}]);

以及模板中的选择字段，如下所示：

'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>

我可以选择一个选项，然后模型会按照预期使用国家代码进行更新，但国家名称不会显示在“选择”字段中，除非我再次选择

换言之，这一过程将继续下去

点击

选择国家

使用国家/地区代码更新模型，但选择字段中不显示名称

单击并再次选择

名称出现在“选择”字段中

---

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

因为您使用的是

replace:true

original

ng model=“citizensity”

无论如何都会在选择元素上结束，所以您不需要处理选择更改事件来更新

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;
        }
    }
}]);

角度模块（'countrySelect'，[]） .directive（'countrySelect'，[function（）{ var国家=[ {代号：“af”，名称：“阿富汗”}， {代码：“ax”，名称：“奥兰群岛”}， {代号：“al”，名称：“阿尔巴尼亚”}， {代码：“dz”，名称：“阿尔及利亚”}， ]; 返回{ 模板：“”， 替换：正确， 链接：功能（范围、要素、属性）{ 范围.国家=国家； } } }]);

---

演示：

您可能希望使用

$apply（）

来“强制更新”视图。

---

谢谢，但dfsq的解决方案只涉及删除一堆代码而不增加复杂性。