Mehrere transclusions von separaten html

Question

Ich möchte mehrere Stücke in eine Direktive transclude. Hier ist meine Idee, wie ich es aufgebaut habe.

<div id="content" class="mainDirective"> 
    <div class="sub"> 
     <ul> 
      <li>Everyone</li> 
      <li>Development (3)</li> 
      <li>Marketing</li> 
     </ul> 
    </div> 
    <div class="subButtons"> 
     <span class="csStIcon add" data-ng-click="addTeam()"></span> 
     <span class="csStIcon edit" data-ng-click="editTeam()"></span> 
     <span class="csStIcon delete" data-ng-click="deleteTeam()"></span> 
    </div> 
    <div class="main"> 
     <table> 
      <thead> 
       <tr><td>Name</td><td>Last name</td><td>Department</td></tr> 
      </thead> 
      <tbody> 
       <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr> 
       <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr> 
       <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

Meine Richtlinie Vorlage:

<div> 
    <div class="left"> 
     <div data-ng-multi-transclude="sub"></div> 
     <div class="bottomOptions"> 
      <span class="csStIcon collapse"></span> 
      <div data-ng-multi-transclude="subButtons"></div> 
     </div> 
    </div> 
    <div class="right"> 
     <div data-ng-multi-transclude="main"></div> 
    </div> 
</div> 

Und die endgültige Ausgabe:

<div> 
    <div class="left"> 
     <div class="sub"> 
      <ul> 
       <li>Everyone</li> 
       <li data-ng-click="loadDepartment()">Development (3)</li> 
       <li data-ng-click="loadDepartment()">Marketing</li> 
      </ul> 
     </div> 
     <div class="bottomOptions"> 
      <span class="csStIcon collapse"></span> 
      <div class="subButtons"> 
       <div class="subButtons"> 
        <span class="csStIcon add" data-ng-click="addTeam()"></span> 
        <span class="csStIcon edit" data-ng-click="editTeam()"></span> 
        <span class="csStIcon delete" data-ng-click="deleteTeam()"></span> 
       </div>    
      </div> 
     </div> 
    </div> 
    <div class="right"> 
     <div class="main"> 
      <table> 
       <thead> 
        <tr><td>Name</td><td>Last name</td><td>Department</td></tr> 
       </thead> 
       <tbody> 
        <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr> 
        <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr> 
        <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

Ist dies möglich innerhalb Winkel?

Answer 1

Dies hat in Winkel 1,5

http://angularjs.blogspot.ca/2016/02/angular-150-ennoblement-facilitation.html

hinzugefügt

Answer 2

kam ich mit dieser Richtlinie bis transcluden Funktion:

app.directive('mainDirective', function($compile) { 
    var template = ['<div>', 
        ' <div class="left">', 
        '  <div data-ng-multi-transclude="sub"></div>', 
        '  <div class="bottomOptions">', 
        '   <span class="csStIcon collapse"></span>', 
        '   <div data-ng-multi-transclude="subButtons"></div>', 
        '  </div>', 
        ' </div>', 
        ' <div class="right">', 
        '  <div data-ng-multi-transclude="main"></div>', 
        ' </div>', 
        '</div>'].join('\n'); 
    return { 
     restrict: 'C', 
     transclude: true, 
     template: template, 
     link: function(scope, element, attr, model, transclude) { 
      var places = element.find('[data-ng-multi-transclude]'); 
      console.log(element); 
      places.each(function() { 
       var self = $(this); 
       var class_ = self.data('ng-multi-transclude'); 
       transclude(scope.$new(), function(clone, scope) { 
        var item = clone.closest('.' + class_); 
        $compile(item)(scope).appendTo(self); 
       }); 
      }); 
     } 
    }; 
}); 

ich verwendet habe, Kompilierung, so können Sie in Ihrem transkludierte Code Winkel verwenden.

Wenn Sie diese:

self.replaceWith($compile(item)(scope)); 

Sie nicht, dass diese Original-Wrapper divs mit data-ng-multi-transclude Attribute bekommt.

Auch Sie müssen jQuery enthalten (immer vor Angular, denn sonst erhalten Sie jQLite statt).

Answer 3

Ich habe mehrere 'transclusions' in der Komponente, die ich schreibe, verwendet. In der Praxis ist es nur Richtlinien verschachtelt, aber sie bekommen den Job zu erledigen: https://github.com/AlexCppns/ac-fancy-input

Genauer gesagt, haben einen Blick auf die folgende Datei:

https://github.com/AlexCppns/ac-fancy-input/blob/master/src/ac-fancy-input/directives/fancy-input.js

Answer 4

ich auch diese Funktionalität benötigen beendet, so dass ich schrieb ng-multi-transclude - komischerweise, ich hatte diese Frage zu der Zeit nicht gesehen, nur glückte in den gleichen Namen.

Die Verwendung ist fast genau wie Ihre Frage Skizzen; Der einzige Unterschied besteht darin, dass Sie das Attribut name verwenden, um das zu füllende "Loch" anstelle des Attributs class auszuwählen.