單獨的html的多重包含

Question

我想將多個片段轉換爲一個指令。這是我如何設置它的想法。

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

我的指令模板：

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

以及最終輸出：

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

這是可能的範圍內的角？

Answer 1

這已經在角1.5

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

被添加

Answer 2

我想出了利用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); 
       }); 
      }); 
     } 
    }; 
}); 

我用的編譯，所以你可以用你的角碼transcluded裏面。

如果使用這樣的：

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

，你會不會讓那些原包裝的div data-ng-multi-transclude屬性。你還需要包含jQuery（總是在Angular之前，因爲否則你會得到jQLite）。

Answer 3

我在我寫的組件中使用了多個'包含'。在實踐中，它只是嵌套的指令，但他們把工作做好：https://github.com/AlexCppns/ac-fancy-input

更具體地講，看看以下文件：

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

Answer 4

我最終需要這個功能很好，所以我寫了ng-multi-transclude - 有趣的是，我當時沒有看到這個問題，只是運氣相同的名字。

用法與您的問題草圖幾乎完全相同;唯一的區別是您使用name屬性選擇要填充的「洞」而不是class屬性。