Direktivlərdən AngularJS-ə direktivlər əlavə edin

Mən bəyan etdiyi elementə əlavə direktivlər əlavə etmək üçün qayğı göstərən bir direktiv yaratmağa çalışıram. Məsələn, datepicker , datepicker-> və ng-required="true" əlavə etmək üçün qayğı göstərən bir direktiv yaratmaq istəyirik.

Bu xüsusiyyətləri əlavə etməyə və sonra $compile etməliyəmsə, mən açıq-aydın bir sonsuz loop yaradıram, buna görə də zəruri xüsusiyyətləri artıq əlavə etmişəmmi yoxlayıram:

 angular.module('app') .directive('superDirective', function ($compile, $injector) { return { restrict: 'A', replace: true, link: function compile(scope, element, attrs) { if (element.attr('datepicker')) { // check return; } element.attr('datepicker', 'someValue'); element.attr('datepicker-> 

Əlbəttə ki, əgər $compile elementi yoxdursa, atributlar təyin olunacaq, amma direktiv yüklənməyəcək.

Bu yanaşma doğru mu, yoxsa səhv edirəm? Eyni davranışa nail olmaq üçün daha yaxşı bir yol varmı?

UDPATE : $compile bu nail olmaq üçün yeganə yol olduğunu nəzərə alaraq, ilk tərtib işini (bir element bir neçə uşaq elementi ola bilər) atlayaraq bir yol varmı? Yəqin ki, terminal:true ?

GÜNCELLEME 2 . Direktivi select elementə qoymağa çalışdım və gözlənildiyi kimi, tərtib iki dəfə yerinə yetirilir, yəni iki dəfə gözlənilən option .

189
07 окт. frapontil oktyabrın 07-də ​​quraşdırılıb 2013-10-07 14:44 '13 at 2:44 pm 2013-10-07 14:44
@ 7 cavab

Bir DOM elementi üçün bir neçə direktivə malik olduğunuz və tətbiq etdikləri qaydada öz ifadənizi sifariş etmək üçün priority əmlakdan istifadə edə bilərsiniz. Əvvəlcədən yüksək ədədlər yerinə yetirilir. Əgər göstərməmisinizsə, u mənim prioritet 0 olur.

EDIT : burada müzakirə etdikdən sonra tam həll işidir. Açar xüsusiyyətini aradan qaldırmaq idi: element.removeAttr("common-things"); , eləcə də element.removeAttr("data-common-things"); (istifadəçilər html data-common-things hallarda)

http://plnkr.co/edit/Q13bUt?p=preview 

Və ya:

Demo 

terminal: true niyə təyin terminal: true izahı terminal: truepriority: 1000 (çox sayda):

DOM hazır olduqda, qeydə alınmış direktivləri müəyyənləşdirmək və bu direktivlər eyni elementdə olduqda , priority əsasında birbaşa direktivləri tərtib etmək üçün DOM-dan buraxılır . İlk olaraqterminal: true tərtib ediləcəyinə əmin olmaq üçün fərdi direktivizmin prioritetini çox sayda müəyyən edirik terminal: true , bu təlimatı tərtib etdikdən sonra qalan direktivlər atlanacaqdır.

Kullanıcı yönergesi derlendiğinde, yönergeleri ekleyerek ve silmeyi ve kompilyasiya hizmetini kullanmaktan sonra bütün yönergeleri (atlatılmışları da daxil olmaqla) derleyerek öğeyi değiştirecektir.

terminal:true təyin etməliyiksə terminal:truepriority: 1000 , bəzi direktivlər xüsusi təlimatımıza tərtib ediləcək bir şans var. Və xüsusi təlimatımız elementi tərtib etmək üçün $ tərtibi istifadə edərkən => artıq tərtib edilmiş direktivləri tərtib edin. Bu, gözlənilməz davranışlara səbəb olacaq, xüsusilə də istifadəçi təlimatına daxil edilmiş direktivlər DOM-nu dəyişmişdir.

Prioritet və terminal haqqında daha ətraflı məlumat üçün 'terminal' direktivini necə anlamaq olar?

Bir nümunəni dəyişdirən bir nümunə nümunəsi ng-repeat tərtib edildikdə, ng-repeat edir (prioritet = 1000), ng-repeat başqa direktivləri tətbiq etmədən əvvəl nümunə elementinin surətlərini çıxarır.

@Izhaki şərhinə görə, burada ngRepeat mənbə kodunun ngRepeat : https://github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js

251
07 окт. Cavab Khanh 07 oktyabr tarixinə verilir. 2013-10-07 18:06 '13 at 18:06 2013-10-07 18:06

Əslində, bütün bunları sadə bir şablon etiketiylə idarə edə bilərsiniz. Məsələn, http://jsfiddle.net/m4ve9/ səhifəsinə baxın. Qeyd: həqiqətən, bir super direktivinin tərifində kompilyasiya xüsusiyyətinə və ya istinadlara ehtiyac yoxdur.

Kompilyasiya prosesi zamanı buruqlar tərtib etmədən əvvəl şablon dəyərlərini alır, buna görə də orada hər hansı digər direktivi əlavə edə bilərsiniz və buruqlar bunu sizin üçün qoruyur.

Bu, orijinal daxili məzmunu qoruyan bir super direktivdirsə, transclude : true istifadə edin transclude : true<ng-transclude></ng-transclude>

border=0

Ümid edirəm ki, bu, bir şey aydın deyilsə, mənə bildirin

Alex

10
09 окт. Cavab 09 oktyabr tarixində verilir . 2013-10-09 18:33 '13 at 18:33 2013-10-09 18:33

Burada görünüşü dinamik şəkildə əlavə etmək lazımdır ki, direktivləri hərəkət bir həll və həmçinin bəzi (əsas) şərti məntiq əlavə edir. Bu, sərt kodlu məntiq olmadan direktivi təmiz saxlayır.

Direktiv obyektlərin bir sıra götürür, hər bir obyekt əlavə olunacaq direktivin adını və onun dəyərinə (əgər varsa) daxildir.

Mən belə bir direktiv üçün nümunə haqqında düşünmək üçün mübarizə aparırdım, buna baxmayaraq, müəyyən bir dövlətə əsaslanan yalnız bir direktivi əlavə edən bəzi şərti məntiq əlavə etmək faydalı olacağını düşündüm (baxmayaraq, aşağıda verilən cavabı hələ də cəlb edir). Bir direktiv əlavə etmək istəmədiklərini müəyyənləşdirən bir dəyər, ifadə və ya bir bool funksiyası (məsələn, nəzarətçinizdə müəyyən edilmiş) olmalıdır ki, bir xüsusiyyət əlavə etdim.

attrs.$attr.dynamicDirectives üçün simli əsaslı sabit kodlaşdırma dəyərləri olmadan bir direktiv (məsələn, data-dynamic-directive , dynamic-directive ) əlavə etmək üçün istifadə edilən dəqiq atribut bəyannaməsini almaq üçün attrs.$attr.dynamicDirectives də istifadə edirəm.

Plunker demosu

 <!doctype html> <html ng-app="plunker"> <head> <script src="//code.angularjs.org/1.2.20/angular.js"></script> <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script> <script src="example.js"></script> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> </head> <body> <div data-ng-controller="DatepickerDemoCtrl"> <select data-ng-options="s for s in selects" data-ng-model="el" data-dynamic-directives="[ { 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' }, { 'tooltip-placement' : 'bottom' }, { 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' } ]"> <option value=""></option> </select> </div> </body> </html> 
6
17 июля '14 в 5:51 2014-07-17 05:51 cavab 17 iyul 17: 14-da GFoley83 tərəfindən verilir . 5:51 2014-07-17 05:51

Qərarımı əlavə etmək istəmişdim, çünki mənim üçün işə yaramadı.

Mən bir direktiv əlavə etməliyəm, həm də mənim maddəimi xilas etməliydim.

Bu nümunədə elementə sadə ng-stil direktivi əlavə edirəm. Sonsuz tərtib dövrünün qarşısını almaq və mənim direktivimi saxlamağa icazə vermək üçün maddəni yenidən tərtib etmədən əvvəl əlavə etdiyimi yoxlamaq üçün bir çek əlavə etdim.

 angular.module('some.directive', []) .directive('someDirective', ['$compile',function($compile){ return { priority: 1001, controller: ['$scope', '$element', '$attrs', '$transclude' ,function($scope, $element, $attrs, $transclude) { // controller code here }], compile: function(element, attributes){ var compile = false; //check to see if the target directive was already added if(!element.attr('ng-style')){ //add the target directive element.attr('ng-style', "{'width':'200px'}"); compile = true; } return { pre: function preLink(scope, iElement, iAttrs, controller) { }, post: function postLink(scope, iElement, iAttrs, controller) { if(compile){ $compile(iElement)(scope); } } }; } }; }]); 
3
04 февр. cavab verildi Sean256 04 fevral. 2015-02-04 23:55 '15 at 11:55 pm 2015-02-04 23:55

Dövləti elementin öz superDirectiveStatus="true" , məsələn superDirectiveStatus="true"

Məsələn:

 angular.module('app') .directive('superDirective', function ($compile, $injector) { return { restrict: 'A', replace: true, link: function compile(scope, element, attrs) { if (element.attr('datepicker')) { // check return; } var status = element.attr('superDirectiveStatus'); if( status !== "true" ){ element.attr('datepicker', 'someValue'); element.attr('datepicker-> 

Bu sizə kömək edir.

1
07 окт. Kemal Dağ tərəfindən verilmiş cavab 07 oktyabr 2013-10-07 14:51 '13 at 14:51 2013-10-07 14:51

1.3.x-dən 1.4.x-a bir dəyişiklik baş verdi.

Açısal 1.3.x formatında, bu işləyib:

 var dir: ng.IDirective = { restrict: "A", require: ["select", "ngModel"], compile: compile, }; function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) { tElement.append("<option value=''>--- Kein ---</option>"); return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) { attributes["ngOptions"] = "a.ID as a.Bezeichnung for a in akademischetitel"; scope.akademischetitel = AkademischerTitel.query(); } } 

İndi bucaqçı 1.4.x-də bunu etmək lazımdır:

 var dir: ng.IDirective = { restrict: "A", compile: compile, terminal: true, priority: 10, }; function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) { tElement.append("<option value=''>--- Kein ---</option>"); tElement.removeAttr("tq-akademischer-titel-select"); tElement.attr("ng-options", "a.ID as a.Bezeichnung for a in akademischetitel"); return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) { $compile(element)(scope); scope.akademischetitel = AkademischerTitel.query(); } } 

(Qəbul edilən cavabdan: qaranliq.tv/questions/33669 / ... Khanh-dan TO).

0
29 дек. Tomas 29 dekabrda cavab verin 2015-12-29 17:32 '16 'da 17:32' de, 2015-12-29 17:32

Bəzi hallarda işləyə bilən sadə bir həll bir qabığa hazırlamaq və tərtib etmək, sonra da mənbə elementini əlavə etməkdir.

Kimi bir şey ...

 link: function(scope, elem, attr){ var wrapper = angular.element('<div tooltip></div>'); elem.before(wrapper); $compile(wrapper)(scope); wrapper.append(elem); } 

Bu həll prosesinin özünəməxsus elementi yenidən tərtib etmədən sadələşdirmək üstünlüyünə malikdir.

Əlavə edilmiş hər hansı bir elementin qaynaq direktivlərindən hər hansı birinin require etdiyi və ya qaynaq elementinin mütləq yerləşdirilməsi varsa bu işləmir.

0
26 февр. cavab fevral ayının 26-da veriləcək 2016-02-26 23:31 '16 saat 11:31 'də 2016-02-26 23:31

etiketləri ilə bağlı digər suallar və ya sual