Wiele załączników oddzielnego html

Question

Chciałbym przetłumaczyć wiele elementów w jedną dyrektywę. Oto mój pomysł, jak to skonfigurować.

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

Moja dyrektywa szablon:

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

A końcowy wynik:

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

Czy to możliwe w ciągu kątowe?

Answer 1

został dodany w kątowym 1,5

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

Answer 2

wymyśliłem tej dyrektywy przy użyciu funkcji transclude:

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

Użyłem kompilacji, dzięki czemu można używać kątowy wewnątrz kodu dołączona.

Jeśli używasz to:

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

będziesz nie dostać te oryginalne owijarki DIV z data-ng-multi-transclude atrybutów.

Należy również włączyć jQuery (zawsze przed Angular, ponieważ w przeciwnym razie pojawi się jQLite).

Answer 3

Użyłem wielu "połączeń" w komponencie, który piszę. W praktyce, to tylko zagnieżdżone dyrektyw, ale to zadanie: https://github.com/AlexCppns/ac-fancy-input

Dokładniej, spojrzeć na następujący plik:

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

Answer 4

skończyło się na potrzeby tej funkcji, tak więc ja napisałem ng-multi-transclude - wystarczająco zabawne, nie widziałem tego pytania w tym czasie, po prostu trafiłem na to samo imię.

Użycie jest prawie dokładnie takie, jak szkice do pytań; jedyną różnicą jest to, że używasz atrybutu name, aby wybrać "dziurę" do wypełnienia zamiast atrybutu class.