AngularJS: Directiva cu domeniu de aplicare izolat

de

Legături

Scopul izolat cu legături de atribute este destul de mișto, dar îi lipsește flexibilitatea de a lega obiecte (ceea ce este destul de normal în zilele noastre), cu excepția șirurilor de caractere simple. În plus, orice modificare în domeniul de aplicare copil nu va actualiza domeniul de aplicare părinte din cauza limitării legăturii de date unidirecționale. Dacă aveți nevoie de ceva mai mult, domeniul de aplicare izolat al legăturilor ar putea fi soluția dvs. în acest caz. Și este destul de ușor de făcut acest lucru, singurul lucru pe care trebuie să-l schimbați este că, în loc să folosiți simbolul „@”, trebuie să folosiți simbolul „=”, atâta tot. Să folosim exemplul de mai sus pentru a demonstra.

În HTML:

<div ng-controller="MyCtrl">
<my-component isolated-binding-person="person">
{{isolatedBindingPerson}}
</my-component>
</div>

În JavaScript:

var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{ 
isolatedBindingPerson:'='
} 
};
})
.controller('MyCtrl', );

Rețineți că în HTML-ul nostru, nu mai avem nevoie de acoladele duble pentru interpolare, ceea ce înseamnă că puteți lega efectiv o variabilă, și chiar un apel de funcție! Aruncați o privire la următorul fragment de cod:

-- HTML --<div ng-controller="MyCtrl">
<my-component isolated-binding-people="showPeople()">
<ul>
<li ng-repeat="person in isolatedBindingPeople">
{{person}}
</li>
</ul>
</my-component>
</div>-- JavaScript --var myModule = angular.module('myModule', )
.directive('myComponent', function () {
return {
restrict:'E',
scope:{ 
isolatedBindingPeople:'='
} 
};
})
.controller('MyCtrl', ;
}
}]);

Nici o surpriză, în DOM, ar trebui să puteți vedea o listă de nume de persoane care sunt afișate. În plus, având în vedere că aceasta este o legătură de date bidirecțională, orice modificare în directivă va actualiza de fapt variabilele controlerului său. Minunat! În cele din urmă, ce se întâmplă dacă doriți să declanșați un eveniment din domeniul de aplicare copil și să apelați o funcție din domeniul de aplicare părinte, chiar să transmiteți un parametru din domeniul de aplicare copil? Acest lucru sună complicat, haideți să îl descompunem puțin.

.

Lasă un comentariu