如何在指令中使用属性的值?我的元素如下所示:
<div class="tooltip-icon"
data-my-tooltip="click"
data-tooltip-title="foo"
data-tooltip-content="test content"></div>
我想在我的指令模板中使用它,如下所示:
mainApp.directive('myTooltip',
function() {
// allowed event listeners
var allowedListeners = ["click"];
return {
restrict: 'A',
template: '<div class="tooltip-title">...</div>' +
'<div class="tooltip-content">' +
'...</div>',
link: function(scope, elm, attrs) {
if(allowedListeners.indexOf(attrs.myTooltip) != -1){
elm.bind(attrs.myTooltip, function(){
...
});
}
}
};
}
);
三重点所在的位置应该有代码,但我不知道如何获取 attrs 对象的内容(attrs.tooltipTitle
等)到该模板中。
您可以拉出属性并将它们放入指令的范围内,如下所示:
angular.module('myApp', []).
directive('myTooltip', function ($log) {
// allowed event listeners
var allowedListeners = ["click"];
return {
restrict: 'A',
template: '<div class="tooltip-title">{{tooltipTitle}}</div>' +
'<div class="tooltip-content">' +
'{{tooltipContent}}</div>',
scope: {
tooltipTitle: '@tooltipTitle',
tooltipContent: '@tooltipContent'
},
link: function (scope, elm, attrs) {
if (allowedListeners.indexOf(attrs.myTooltip) != -1) {
elm.bind(attrs.myTooltip, function () {
$log.info('clicked');
});
}
}
};
});
这是小提琴:http://jsfiddle.net/modern Degree/f3JL3/ http://jsfiddle.net/moderndegree/f3JL3/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)