为什么这个角度选择包装器指令不起作用？答案

【问题标题】：Why doesn't this angular select wrapper directive work?为什么这个角度选择包装器指令不起作用？
【发布时间】：2015-08-07 15:11:41
【问题描述】：

我正在尝试创建一个使用硬编码列表环绕 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>

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

【问题讨论】：

标签： javascript angularjs angularjs-directive html-select

【解决方案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);


})();

【讨论】：

在controller而不是链接中需要什么？ link 中的 scope 对象本质上不是一样的吗？
link 函数通常用于注册 DOM 监听器以及更新 DOM。 controller 必须在另一个指令需要与此指令交互时使用，例如ngOptions。此外，在您的示例中，您的变量设置为this，而不是$scope。这里使用this 而不是scope。欲了解更多信息，请点击此处this vs scope

【解决方案2】：

您忘记在您的选择中指定ng-model="currentValue"；没有它，options 将不会初始化。此外，如果您想使用 controllerAs 引用它，您可能需要定义控制器：

controller: function () {
        this.arr = ["a", "b"];
    },

或者你可以将你的数组直接放在你的指令范围内。这是您的指令的一些更新：

myApp.directive('dir', function () {
return {
    restrict: 'E',
    template: "<select ng-model='crrValue' ng-options='x for x in vm.arr'></select><div ng-repeat='item in arr'>{{item}}</div>",
    controller: function () {
        this.arr = ["a", "b"];
    },
    controllerAs: 'vm',
    link: function (scope) {
        scope.arr = ["c", "d"]
    }
};
});

你会注意到 div 和 select 之间的区别。

希望这对任何人都有帮助！

【讨论】：