是否可以将参数传递给指令并将该值设置为指令范围？
示例:
angular
.module('app', [])
.controller('CTRL', function($scope) {
$scope.some_value = {
instance1: {
key1: 'value11',
key2: 'value12'
},
instance2: {
key1: 'value21',
key2: 'value22'
},
};
})
.directive('uiClock', function() {
return {
restrict: 'E',
scope: {},
template: template,
link: function(scope, element, attr) {
// scope should now contain either (first directive)
// {
// key1: 'value11',
// key2: 'value12'
// }
// or (second directive)
// {
// key1: 'value21',
// key2: 'value22'
// }
console.log(scope);
}
};
});
<div ng-controller="Ctrl">
<ui-clock ng-bind="some_value.instance1"></ui-clock>
<ui-clock ng-bind="some_value.instance2"></ui-clock>
</div>
我想这样做的原因是我有同一指令的多个实例，每个实例都应该修改从父范围作为参数传递的值。
有什么想法吗？
最佳答案
您应该使用双向数据绑定(bind)。
在指令中，您可以指定隔离范围，并使用 = 语法，这非常有用。
Controller
(function(){
function Controller($scope) {
$scope.some_value = {
instance1: {
key1: 'value11',
key2: 'value12'
},
instance2: {
key1: 'value21',
key2: 'value22'
},
};
}
angular
.module('app', [])
.controller('ctrl', Controller);
})();
指令
(function(){
function directive($compile) {
return {
restrict: 'E',
scope: {
data: '='
},
templateUrl: 'template.html',
link: function(scope, element, attr) {
var elm = angular.element(element);
//For all key in scope.data
Object.keys(scope.data).forEach(function(key){
//Create a new property for our isolate scope
scope[key] = scope.data[key];
//Add attr to our element
elm.attr(key, scope[key]);
});
//Remove our data attribute
elm.removeAttr('data');
//Then we can access to scope.key1 & scope.key2
console.log(scope.key1);
console.log(scope.key2);
}
};
}
angular
.module('app')
.directive('directive', directive);
})();
模板
<div>Key 1 : {{key1}}</div>
<div>Key 2 : {{key2}}</div>
然后您可以通过将特定数据传递到我们的隔离范围来调用您的指令。如果需要，您可以删除父元素的 data 属性，并将其替换为对象的值。
HTML
<body ng-app='app' ng-controller="ctrl">
<directive data='some_value.instance1'></directive>
<directive data='some_value.instance2'></directive>
</body>
如果您检查 directive 元素，data 属性将被删除并替换为 key1 = value... 等...
您可以看到Working Plunker
关于javascript - AngularJS 使用父 Controller 变量的值创建指令范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32268635/