All geek questions in one place

Multiple transitions of individual html

I would like to translate several parts into one directive. Here is my idea of ​​how I configured it.

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

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

And the final conclusion:

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

Is this possible in angular?

+5
source share
4 answers

I also needed this function, so I wrote ng-multi-transclude - oddly enough, I did not see this question at the time, I just got lucky in the same name.

Use almost exactly how your thumbnails matter; the only difference is that you use the name attribute to select the "hole" to fill in instead of the class attribute.

+1
source

I came up with this directive using the transclude function:

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

I used compilation so you can use angular inside your translated code.

If you use this:

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

you won't get those original div wrappers with data-ng-multi-transclude .

You also need to enable jQuery (always before Angular, because otherwise you will get jQLite).

0
source

I used several transitions in the component that I am writing. In practice, these are just nested directives, but they do their job: https://github.com/AlexCppns/ac-fancy-input

More specifically, look at the following file:

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

0
source

Source: https://habr.com/ru/post/944232/

More articles:


All Articles