使用带有transclude的指令编译时重复的属性

Question

JsFiddle的问题:http://jsfiddle.net/UYf7U/

在指令编译中使用angularJs transclude时,它将复制任何属性属性.即

<a class="myClass">my link</a>

会变成

<a class="myClass myClass">my link</a>

同样,使用ngClick时

<a ng-click="myFunction()"> my link</a>

会变成

<a ng-click="myFunction() myFunction()"> my link</a>

小提琴演示了这一点,不幸的是它崩溃了.这是我正在尝试实施的简化版本.

有没有解决的办法？我已将问题发布到github:https://github.com/angular/angular.js/issues/2576

单击Hello时,单击"clicked"应显示在警报中.

Answer 1

发生这种情况是因为myDirective被初始化了两次 - 首先作为标记的一部分:

 <div class="transcludeMe">
     <div data-transclude-this="here">
         <div class="myDirective"></div>
     </div>
 </div>

在transcludeMe指令中的第二个- 因为你在指令初始化的编译阶段执行此操作:

transcludeHere[0].innerHTML = clone[x].innerHTML

由于您使用replace:true原始元素的所有属性将被复制到模板元素.如果你删除它你的例子有效,但你仍然知道它myDirective被初始化了两次:http://jsfiddle.net/tkzgG/

Answer 2

我找到了一种不同的方法来进行多重嵌入，并完全解决了我的问题，这是解决我的问题的更新小提琴： http: //jsfiddle.net/UYf7U/1/

该代码来自我之前的问题：Multiple transclusions of alone html in an update that I did not see。

小提琴将会过时，但这是我最终的多重嵌入函数。我已将逻辑模式设置为编译而不是控制器，以便它可以包含需要具有 ng-repeat 之类的内容的 dom

.directive('multiTranscludeTo', function($rootScope){
    return {
        compile: function(tElement, tAttributes, transclude){
            var baseScope = this;
            transclude($rootScope, function(clone){
                for (var x = 0; x < clone.length; x++){
                    var child = angular.element(clone[x]);
                    var viewName = child.attr('data-multi-transclude-from') || child.attr('multi-transclude-from');
                    if (viewName && viewName.split(" ")[0] == tAttributes["multiTranscludeTo"]){
                        tElement.html(clone[x].innerHTML);
                    }
                }
            });
        }
    }
})