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

Question

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

这是一个 fiddle 和我在这篇文章中的代码: 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>'

我用这个改变 fork 了你的 fiddle :http://jsfiddle.net/W5Ex3/