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