Duplicate attributes when using compilation with transclude

Question

Js Problem Issue: http://jsfiddle.net/UYf7U/

When using angularJs skew as part of compiling directives, it will duplicate any attribute properties. I.e

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

Will become

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

Similarly, when using ngClick

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

Will become

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

The violin demonstrates this, and unfortunately it falls. This is a stripped down version of what I'm trying to implement.

Is there any way around this? I posted this problem on github: https://github.com/angular/angular.js/issues/2576

When you click "Hello" in the warning, the word "clicked" should appear.

Answer 1

I found another way to do multi-transclusion and completely fixed my problem, here is the fiddle updated to fix my problem: http://jsfiddle.net/UYf7U/1/

The code came from my previous question here: Several transitions of a single html in an update that I have not seen.

The violin will be obsolete, but this is my last translation feature. I use logic to compile instead of the controller so that it can translate dom, for which you need to have things like ng-repeat

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

Answer 2

This is because myDirective is initialized twice - first as part of your markup:

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

The second in the transcludeMe directive is because you do this at the compilation stage of directive initialization:

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

Since you are using replace:true , all attributes of the source element will be copied to the template element. If you remove this, your example works, but you still know that myDirective gets initialized twice: http://jsfiddle.net/tkzgG/

Answer 3

How important is it to specify the directive name as a class? This problem does not occur when directives are used as elements directly.

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

Thus, plus replacing restrict: 'C' with restrict: 'E' in the definitions of directives (and making some changes to the situation to avoid the problem):

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