AngularJS：带有ng-options参数的指令中的下拉菜单

Question

我想创建一个带有下拉模板的指令。 我尝试提供ng-options的值作为指令的参数，但下拉列表仅包含默认值。

这是本文中的小提琴和我的代码： http : //jsfiddle.net/wXV6Z/6/

var app = angular.module('app', []);

function Ctrl($scope){    
    $scope.countries = [
        algeria={name:'ALGERIA', phoneCode:'213'},
        andorra={name:'ANDORRA', phoneCode:'376'},
        angola={name:'ANGOLA', phoneCode:'244'}
    ];
}

app.directive('skiTest', function() {
    return {
      'replace': true,
      'restrict': 'E',
      'scope': {
        'data': '=',
      }, 
      link: function (scope, element, attrs) {
            scope.options = attrs.selectOptions;
       },
        'template':'<div><select name="testSelect" ng-model="ngModel" ng-options="
      {{options}} in data"><option value="">Code</option></select></div>'
        }
      });

这是HTML：

<div ng-controller="Ctrl">
    <div>
        <h2>Without directive</h2>
        <select ng-model="code" ng-options="country.phoneCode as country.name for    country in countries">
            <option value="">Code</option>
        </select>
    </div>
    <div>
        <h2>With directives</h2>
        <ski-test data="countries" select-options="country.phoneCode as country.name for country"></ski-test>
    </div>
</div>

如果有人指出我的错误，非常感谢！

Answer 1

指令中的模板只需是这样的：

'template':'<div><select name="testSelect" ng-model="data" ng-options="c.name for c in data"><option value="">Code</option></select></div>'

我为您的提琴分叉了这一变化： http : //jsfiddle.net/W5Ex3/