6

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

在指令编译中使用 angularJs transclude 时，它​​将复制任何属性属性。IE

<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 时，“单击”一词应出现在警报中。

4

3 回答 3

8

发生这种情况是因为 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/

于 2013-05-09T18:17:46.367 回答
1

将指令名称指定为类对您来说有多重要？当指令直接用作元素时，不会发生此问题。

见http://jsfiddle.net/smmccrohan/cfP3U/

像这样，加上替换指令定义中的restrict: 'C'with restrict: 'E'（并进行一些大小写更改以避免出现问题）：

<div ng-app="app">
 <div ng-controller="ParentCtrl">
     <transcludeme>
         <div data-transclude-this="here">
             <mydirective />
         </div>
     </transcludeme>
 </div>
</div>
于 2013-05-09T14:25:40.510 回答
1

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

代码来自我之前的问题：Multiple transclusions of separate html in an update that I didn't 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);
                    }
                }
            });
        }
    }
})
于 2013-05-17T11:43:18.920 回答