Question

在指令编译中使用angularJs transclude时，它将复制any 属性属性。即

<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/smmccrohan/cfP3U/

就像这样，加上在指令定义中用restrict: 'C'替换restrict: 'E'（并进行一些案例更改以避免出现问题）：

<div ng-app="app">
 <div ng-controller="ParentCtrl">
     <transcludeme>
         <div data-transclude-this="here">
             <mydirective />
         </div>
     </transcludeme>
 </div>
</div>

Answer 3

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

代码来自我之前的问题：Multiple transclusions of separate html在我未看到的更新中。

小提琴将过时，但这是我最后的多重翻译功能。我已经将逻辑模式编译为编译而不是控制器，这样它就可以转换需要像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);
                    }
                }
            });
        }
    }
})

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

3 个答案: