如何更换时，美元角指令p $ pvent复制属性=真 [英] How to prevent duplicated attributes in angular directive when replace=true

问题描述

我发现，指定角度指令更换：真正的将从指令使用的属性复制到由模板呈现的输出。如果模板包含相同属性，都将模板的属性值和指令属性值将被一起在最终输出相结合。

I've found that angular directives that specify replace: true will copy attributes from the directive usage into the output rendered by the template. If the template contains the same attribute, both the template attribute value and the directive attribute value will be combined together in the final output.

指令用法：

<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>

在巴兹在酒吧=一引起问题，因为是多值的空间。有没有办法来改变这种行为？我意识到我可以在我的指令中使用不冲突的属性，并同时具有模板属性，并在输出非冲突的属性。不过，我想能够使用相同的属性名称，并控制模板的输出更好。

The space in bar="one " is causing problems, as is multiple values in baz. Is there a way to alter this behavior? I realized I could use non-conflicting attributes in my directive and have both the template attributes and the non-conflicting attributes in the output. But I'd like to be able to use the same attribute names, and control the output of the template better.

我想我可以使用链接法 element.removeAttr（）和 element.attr（）。这似乎只是应该有一个更好的解决方案。

I suppose I could use a link method with element.removeAttr() and element.attr(). It just seems like there should be a better solution.

最后，我知道有去precating的通话删除：真正的，但也有保持它有效的原因。就我而言，我需要它生成使用transclusion SVG标签指令。在这里看到的细节：
<一href=\"https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb\">https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

Lastly, I realize there is talk of deprecating remove: true, but there are valid reasons for keeping it. In my case, I need it for directives that generate SVG tags using transclusion. See here for details: https://github.com/angular/angular.js/commit/eec6394a342fb92fba5270eee11c83f1d895e9fb

推荐答案

没有，没有一些不错的声明方式来告诉如何角 X 属性应该被合并或当移植到模板操作。

No, there isn't some nice declarative way to tell Angular how x attribute should be merged or manipulated when transplanted into templates.

角实际上做的属性从源头直拷贝到目标元素（只有少数例外），并合并属性值。你可以看到这种行为<一个href=\"https://github.com/angular/angular.js/blob/9b3d9656a69a931f4fcd321cedf837661e1e5785/src/ng/compile.js#L2104\"相对=nofollow> mergeTemplateAttributes 的角度编译器的功能。

Angular actually does a straight copy of attributes from the source to the destination element (with a few exceptions) and merges attribute values. You can see this behaviour in the mergeTemplateAttributes function of the Angular compiler.

既然你不能改变这种行为，你可以克服的属性以及它们与编译或链接指令定义的属性。它最有可能更有意义给你做属性操作在编译阶段而不是链接阶段，因为你希望这些属性是由任何一个环节功能运行的时间准备就绪。

Since you can't change that behaviour, you can get some control over attributes and their values with the compile or link properties of the directive definition. It most likely makes more sense for you to do attribute manipulation in the compile phase rather than the link phase, since you want these attributes to be "ready" by the time any link functions run.

您可以做这样的事情：

.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
    // ...
  }
})

这篇关于如何更换时，美元角指令p $ pvent复制属性=真的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！