अलग-अलग एचटीएमएल

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

आप नहीं मिलता हूँ उन मूल रैपर data-ng-multi-transclude विशेषताओं के साथ divs।

इसके अलावा आपको jQuery को शामिल करने की आवश्यकता है (हमेशा कोणीय से पहले, क्योंकि अन्यथा आप इसके बजाय 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 लिखा - मज़ेदार रूप से पर्याप्त, मैंने उस समय इस प्रश्न को नहीं देखा था, बस उसी नाम में भाग्यशाली था।

उपयोग लगभग आपके प्रश्न स्केच के समान है; केवल अंतर यह है कि आप class विशेषता के बजाय "छेद" भरने के लिए name विशेषता का उपयोग करते हैं।