0

我是 Angular JS 的新手。我想做的是使用 Directive 创建一个可重用的组件。到目前为止，它只有一个下拉菜单。在执行 Add 时，下拉菜单会填充 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'}];

如您所见，我添加了“标签”进行测试。我正在更改加载函数选项卡的值，当我单击编辑时会调用该函数。正在打印选项卡的新值，但下拉菜单未初始化。

4

1 回答 1

0

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]发生变化，它将不会被更新。为此，您必须执行 a$watch来监听更改：

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

希望有帮助。

更新：

澄清一下，有多种方法可以做到这一点，所以你想怎么做取决于你。但是指令中绑定背后的想法scope: { ... }是，您要指定要绑定范围的哪些属性以及如何绑定它们（单向或双向）。您告诉 Angular 将$scope.array控制器中的属性绑定到您的指令中。但是因为没有任何$scope.array财产，所以没有任何东西被绑定。因此，您可以将绑定更改为 say scope: {permissionValues: '='}，也可以将$scope.permissionValues函数controller更改为$scope.array. 要么应该工作。

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

这更有意义吗？

于 2013-10-22T18:21:42.103 回答