Transclusioni multiple di html separato

Question

Vorrei suddividere più pezzi in una direttiva. Ecco la mia idea di come l'avrei impostata.

<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> 

mia direttiva modello:

<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> 

E il risultato finale:

<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> 

È questo possibile entro angolare?

Answer 1

Questo è stato aggiunto in angolare 1,5

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

Answer 2

sono arrivato fino a questa direttiva utilizzando la funzione transclude: compile

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

che ho usato in modo da poter utilizzare angolare all'interno del vostro codice di transclusa.

Se si utilizza questo:

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

si non ottenere quei involucri originali div con data-ng-multi-transclude attributi.

Inoltre è necessario includere jQuery (sempre prima di Angular, perché altrimenti si ottiene jQLite).

Answer 3

Ho usato più "transclusioni" nel componente che sto scrivendo. In pratica, è solo annidato direttive, ma ottenere il lavoro fatto: https://github.com/AlexCppns/ac-fancy-input

Più in particolare, date un'occhiata al seguente file:

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

Answer 4

Ho finito per dover questa funzionalità pure, così mi ha scritto ng-multi-transclude - stranamente, non avevo mai visto questa domanda in quel momento, solo con lo stesso nome.

L'utilizzo è quasi esattamente come la tua domanda schizza; l'unica differenza è che si utilizza l'attributo name per selezionare il "foro" da riempire invece dell'attributo class.