zduplikowane atrybutów podczas korzystania dyrektywa kompilacji z transclude

Question

JsFiddle zagadnienia: http://jsfiddle.net/UYf7U/

Przy stosowaniu angularjs transclude wewnątrz a dyrektyw kompilacji będzie powielać właściwości żadnych atrybutów. To znaczy.

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

Czy stać

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

Podobnie, w przypadku korzystania z ngClick

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

Czy stać

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

skrzypcach dowodzi tego, a niestety wywala. Jest to uproszczona wersja tego, co próbuję zaimplementować.

Czy istnieje sposób obejścia tego? Wysłałem problem do github na adres: https://github.com/angular/angular.js/issues/2576

Po kliknięciu przycisku Witam pojawi się komunikat "kliknięty".

Answer 1

Znalazłem inny sposób na multi-transclusion i to naprawiło mój problem całkowicie, oto zaktualizowane skrzypce dla mojego problemu zostało naprawione: http://jsfiddle.net/UYf7U/1/

Kod pochodzi z mojego poprzedniego pytania tutaj: Multiple transclusions of separate html w aktualizacji, której nie widziałem.

Fiddle będzie nieaktualny, ale jest to moja ostatnia funkcja multi-transclusion. I Tryb mam logikę do kompilacji zamiast sterownika tak, że można go transclude DOM, który musi mieć takie rzeczy jak 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

Jak ważne jest, aby podać nazwę dyrektywy jako klasę? Ten problem nie występuje, gdy dyrektywy są używane bezpośrednio jako elementy.

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

Podoba Ci się ten sposób, a także zastąpienie restrict: 'C' z restrict: 'E' w definicjach dyrektywy (i co kilka przypadków zmiany, aby uniknąć problemu tam):

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

Answer 3

Dzieje się tak dlatego myDirective jest inicjowany dwa razy - pierwszy jako część Twojego znacznika:

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

Drugi wDyrektywa- skoro można to zrobić na etapie kompilacji z inicjalizacji dyrektywy:

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

Ponieważ używasz replace:true wszystkie cechy oryginalnego elementu zostaną skopiowane do elementu szablonu. Jeśli to usuniesz, twój przykład działa, ale nadal masz świadomość, że myDirective inicjuje się dwa razy: http://jsfiddle.net/tkzgG/