当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编译器的函数中看到此行为。

由于您无法更改该行为,因此可以使用指令定义的compilelink属性来控制属性及其值。在编译阶段而不是在链接阶段进行属性操作对您来说更有意义,因为您希望这些属性在任何链接函数运行时都“准备就绪”。

您可以执行以下操作:

.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

回到顶部