AngularJS -未初始化指令组件下拉列表以进行编辑

Question

我是Angular JS的新手。我想做的是使用Directive创建一个可重用的组件。到目前为止，它只有一个下拉列表。在添加时，下拉列表将填充permissionValues数组中的值，并与具有所选值的空模型进行绑定。但是当我尝试编辑时，下拉列表并没有使用现有的模型值进行初始化。指令代码。

  directive('userPermissions', function() {
      return {
        restrict: 'E',
        template:'<div><select ng-model="ngModel" ng-options="abc [optValue] as abc [optDescription] for abc in array"></select>{{tab}}</div>',
        replace: true,
        transclude: true,
        scope:{ ngModel: '=', tab:'='},
        link: function (scope, element, attrs) {
            scope.optValue = attrs.optValue;
            scope.optDescription = attrs.optDescription;
            scope.$watch(attrs.array, function(newVal, oldVal){
                 if(newVal != oldVal){
                     scope.array = newVal;
                 }
            });
        }
      };
    });

HTML代码

                <user-permissions  tab="tab"  
                    ng-model="newUser.canCheckout1" 
                    array="permissionValues" 
                    opt-value="value" 
                    opt-description="label"></user-permissions>  

在主控制器中

 $scope.permissionValues = [{label:'Standard', value:'true'},{label:'Restricted', value:'false'}];

如你所见，我为测试添加了"tab“。我正在更改加载函数的tab的值，该函数在我单击Edit时被调用。正在打印tab的新值，但下拉列表未初始化。

Answer 1

您正尝试使用以下命令从控制器双向绑定array属性：

scope: {array: '=' ... }

问题是您的控制器中没有任何$scope.array。因此，您需要以某种方式将两者联系起来。试试这个：

link: function(scope, element, attrs){
    scope.optValue = attrs.optValue;
    scope.optDescription = attrs.optDescription;
    scope.array = scope.$eval(attrs.array);
}

这将会起作用，但不会创建动态绑定。它将只读取值一次，然后如果scope[attrs.array]发生变化，它将不会更新。为此，您必须执行一个$watch来侦听更改：

scope.$watch(attrs.array, function(newVal, oldVal){
     if(newVal != oldVal){
         scope.array = newVal;
     }
});

希望这能有所帮助。

更新：

要澄清的是，有多种方法可以做到这一点，所以你想如何做到这一点取决于你。但是，指令中的scope: { ... }绑定背后的思想是，您要指定要绑定的作用域的哪些属性以及如何绑定它们(单向或双向)。您告诉angular将控制器中的$scope.array属性绑定到指令中。但是因为没有任何$scope.array属性，所以没有绑定任何内容。因此，您可以将绑定更改为scope: {permissionValues: '='}，也可以将controller函数中的$scope.permissionValues更改为$scope.array。这两个都应该行得通。

但是，由于您试图在指令中使用array="permissionValues"属性来表示要使用哪个$scope属性，因此我认为您可能希望按照我上面指定的方式来完成此操作。使用scope.$watch意味着您根本不需要使用任何scope: { ... }绑定。$watch函数手动为您创建绑定，并允许您在运行时使用attrs.array值动态绑定到适当的作用域参数。使用scope: {}要求您知道在创建指令时调用作用域属性，而不是在从DOM中读取它时。

这更有意义吗？