javascript - 为什么这个 Angular 选择包装器指令不起作用？

Question

我正在尝试创建一个指令，用硬编码列表包裹 select

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

app.directive('dir', [function(){
  return{
            restrict: 'E',
            template: "<select ng-options='x for x in vm.arr'></select>",
            controllerAs: 'vm',
            link: function(scope) {
                scope.arr=["a", "b"];
            }
        };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="dirApp">
<dir></dir>
  </div>

正如您所看到的，由于某种原因，列表中没有填充值。我做错了什么？

Answer 1

您必须将数据放入 Controller 中，并将ngModel添加到您的模板中。

指令

(function(){

  function dir() {
      return{
          restrict: 'E',
          template: "<select ng-model='vm.x' ng-options='x for x in vm.arr'></select>",
          controllerAs: 'vm',
          controller: function() {
            var vm = this;
            vm.arr = ["a", "b"];
            vm.x = vm.arr[0]
          }
        };
  }

angular
  .module('app')
  .directive('dir', dir);


})();