当replace = true时如何防止角度指令中的属性重复
我发现指定的角度指令replace:
true会将指令用法中的属性复制到模板呈现的输出中。如果模板包含相同的属性,则模板属性值和指令属性值将在最终输出中组合在一起。
指令用法:
<foo bar="one" baz="two"></foo>
指示:
.directive('foo', function() { return {
restrict: 'E',
replace: true,
template: '<div bar="{{bar}}" baz="baz"></div>',
scope: {
bar: '@'
},
link: function(scope, element, attrs, parentCtrl) {
scope.bar = scope.bar || 'bar';
}
};
})
输出:
<div bar="one " baz="two baz" class="ng-isolate-scope"></div>
中的空格bar="one
"和中的多个值一样会引起问题baz
。有没有办法改变这种行为?我意识到我可以在指令中使用非冲突属性,并在输出中同时包含模板属性和非冲突属性。但我希望能够使用相同的属性名称,并更好地控制模板的输出。
我想我可以使用link
方法与element.removeAttr()
和element.attr()
。似乎应该有一个更好的解决方案。
最后,我意识到有人在谈论过时remove:
true,但是有保留的理由。就我而言,我需要它使用伪指令生成SVG标签的指令。详情请看这里:https
:
//github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb
回答:
不,没有什么好的声明方式可以告诉Angular在将x
属性移植到模板时应如何合并或操纵属性。
Angular实际上将属性从源直接复制到目标元素(有一些例外),并合并属性值。您可以mergeTemplateAttributes
在Angular编译器的函数中看到此行为。
由于您无法更改该行为,因此可以使用指令定义的compile
或link
属性来控制属性及其值。在编译阶段而不是在链接阶段进行属性操作对您来说更有意义,因为您希望这些属性在任何链接函数运行时都“准备就绪”。
您可以执行以下操作:
.directive('foo', function() { return {
// ..
compile: compile
// ..
};
function compile(tElement, tAttrs) {
// destination element you want to manipulate attrs on
var destEl = tElement.find(...);
angular.forEach(tAttrs, function (value, key) {
manipulateAttr(tElement, destEl, key);
})
var postLinkFn = function(scope, element, attrs) {
// your link function
// ...
}
return postLinkFn;
}
function manipulateAttr(src, dest, attrName) {
// do your manipulation
// ...
}
})
以上是 当replace = true时如何防止角度指令中的属性重复 的全部内容, 来源链接: utcz.com/qa/407281.html