我有一个属性指令限制如下:
restrict: "A"
我需要传入两个属性;一个数字和一个函数/回调,使用attrs
对象在指令中访问它们。
如果指令是一个元素指令,"E"
我可以这样做:
<example-directive example-number="99" example-function="exampleCallback()">
但是,由于我不会进入的原因,我需要该指令是一个属性指令。
如何将多个属性传递给属性指令?
我有一个属性指令限制如下:
restrict: "A"
我需要传入两个属性;一个数字和一个函数/回调,使用attrs
对象在指令中访问它们。
如果指令是一个元素指令,"E"
我可以这样做:
<example-directive example-number="99" example-function="exampleCallback()">
但是,由于我不会进入的原因,我需要该指令是一个属性指令。
如何将多个属性传递给属性指令?
该指令可以访问在同一元素上定义的任何属性,即使该指令本身不是该元素。
模板:
<div example-directive example-number="99" example-function="exampleCallback()"></div>
指示:
app.directive('exampleDirective ', function () {
return {
restrict: 'A', // 'A' is the default, so you could remove this line
scope: {
callback : '&exampleFunction',
},
link: function (scope, element, attrs) {
var num = scope.$eval(attrs.exampleNumber);
console.log('number=',num);
scope.callback(); // calls exampleCallback()
}
};
});
如果属性的值example-number
将被硬编码,我建议使用$eval
一次,并存储该值。变量num
将具有正确的类型(数字)。
您的操作方式与使用元素指令的方式完全相同。您将它们放在 attrs 对象中,我的示例通过隔离范围将它们进行双向绑定,但这不是必需的。如果您使用的是隔离范围,则可以使用scope.$eval(attrs.sample)
或简单地访问属性 scope.sample,但根据您的情况,它们可能不会在链接时定义。
app.directive('sample', function () {
return {
restrict: 'A',
scope: {
'sample' : '=',
'another' : '='
},
link: function (scope, element, attrs) {
console.log(attrs);
scope.$watch('sample', function (newVal) {
console.log('sample', newVal);
});
scope.$watch('another', function (newVal) {
console.log('another', newVal);
});
}
};
});
用作:
<input type="text" ng-model="name" placeholder="Enter a name here">
<input type="text" ng-model="something" placeholder="Enter something here">
<div sample="name" another="something"></div>
您可以将对象作为属性传递并将其读入指令,如下所示:
<div my-directive="{id:123,name:'teo',salary:1000,color:red}"></div>
app.directive('myDirective', function () {
return {
link: function (scope, element, attrs) {
//convert the attributes to object and get its properties
var attributes = scope.$eval(attrs.myDirective);
console.log('id:'+attributes.id);
console.log('id:'+attributes.name);
}
};
});
这对我有用,我认为更符合 HTML5 标准。您应该更改您的 html 以使用 'data-' 前缀
<div data-example-directive data-number="99"></div>
并在指令中读取变量的值:
scope: {
number : "=",
....
},
如果您从另一个指令中“要求”“exampleDirective”+您的逻辑在“exampleDirective”控制器中(比如说“exampleCtrl”):
app.directive('exampleDirective', function () {
return {
restrict: 'A',
scope: false,
bindToController: {
myCallback: '&exampleFunction'
},
controller: 'exampleCtrl',
controllerAs: 'vm'
};
});
app.controller('exampleCtrl', function () {
var vm = this;
vm.myCallback();
});