我发现指定replace：true的angular指令会将指令用法中的属性复制到模板呈现的输出中.如果模板包含相同的属性,则模板属性值和指令属性值将在最终输出中组合在一起.
指令用法：
<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.removeAttr()和element.attr()的链接方法.似乎应该有一个更好的解决方案.
最后,我意识到有关于弃用删除的说法：是的,但有正当理由保留它.在我的情况下,我需要它用于使用transclusion生成SVG标记的指令.详情请见此处：
https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb
不,没有一些很好的声明方式告诉Angular如何在移植到模板时合并或操作x属性.
原文链接：https://www.f2er.com/angularjs/142324.htmlAngular实际上是从源到目标元素的一个直接的属性副本(有一些例外)并合并属性值.您可以在Angular编译器的mergeTemplateAttributes函数中看到此行为.
由于无法更改该行为,因此可以使用指令定义的编译或链接属性来控制属性及其值.在编译阶段而不是链接阶段进行属性操作很可能更有意义,因为在任何链接函数运行时,您希望这些属性“准备好”.
你可以这样做：
.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,attrs) {
// your link function
// ...
}
return postLinkFn;
}
function manipulateAttr(src,dest,attrName) {
// do your manipulation
// ...
}
})
