我是Angular JS的新手。我正在尝试做的是使用指令创建一个可重用的组件。截至目前,它只有一个下拉菜单。在执行添加时,下拉列表正在填充 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;
}
});
}
};
});
网页代码
<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'}];
如您所见,我添加了"选项卡"进行测试。我正在更改加载函数上的选项卡值,当我单击编辑时会调用该值。正在打印选项卡的新值,但下拉列表未初始化。
您正在尝试使用以下方法从控制器双向绑定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 参数。 使用 scope: {}
要求您知道创建指令时调用 scope 属性,而不是从 DOM 读取指令时调用该属性。
这更有意义吗?