AngularJSディレクティブで選択するオプションを追加するにはどうすればよいですか？

Question

私はselectタグ（国選択のために使用する）私はディレクティブを使用してオプションを事前入力したいがあります。

<select class="countryselect" required ng-model="cust.country"></select> 

私のディレクティブは、私が埋めることができています

return { 
    restrict : "C", 
    link: function postLink(scope, iElement, iAttrs) { 
    var countries = [ 
     ["AND","AD - Andorra","AD"], 
     ["UAE","AE - Vereinigte Arabische Emirate","AE"] 
     ... //loop array and generate opt elements 
     iElement.context.appendChild(opt); 
    } 
    } 

のようになります追加のオプションで選択しますが、ng-modelバインディングは機能しません。 cust.countryに値（たとえば "UAE"）が設定されていても、このオプションは選択されません。

選択表示にcust.countryの値を設定するにはどうすればよいですか？もし私がここにタイミングの問題があると思うなら。

Answer 1

あなたは角度JSからディレクティブを使用することができます。

マークアップ：

<div ng-controller="MainCtrl"> 
<select ng-model="country" ng-options="c.name for c in countries"></select> 
{{country}} 
</div> 

スクリプト：

app.controller('MainCtrl', function($scope) { 
    $scope.countries = [ 
    {name:'Vereinigte Arabische Emirate', value:'AE'}, 
    {name:'Andorra', value:'AD'}, 
    ]; 

    $scope.country = $scope.countries[1]; 

}); 

は、選択のドキュメントを確認してください：Angular Select

app.directive('sel', function() { 
    return { 
     template: '<select ng-model="selectedValue" ng-options="c.name for c in countries"></select>', 
     restrict: 'E', 
     scope: { 
      selectedValue: '=' 
     }, 
     link: function (scope, elem, attrs) { 
      scope.countries = [{ 
       name: 'Vereinigte Arabische Emirate', 
       value: 'AE' 
      }, { 
       name: 'Andorra', 
       value: 'AD' 
      }, ]; 
      scope.selectedValue = scope.countries[1]; 
     } 
    }; 
}); 

メインコントローラ：

app.controller('MainCtrl', function($scope) { 

    $scope.country={}; 

}) 

マークアップ：

<div ng-controller="MainCtrl"> 
<sel selected-value="country"></sel> 
{{country}} 
</div> 

DIRECTIVE

ディレクティブで

EDIT

作業例：EXAMPLE