Directivă AngularJS – Scopuri

Acest lucru se realizează prin specificarea domeniului de aplicare ca

scope: {}

în definiția directivei.

În exemplul de mai jos, domeniul de aplicare izolat se obține prin transmiterea unui obiect gol {} către directivă.

var myApp = angular.module('myApp', );
myApp.controller('MyController', function($scope) {
$scope.name = "Jack";
});// usage: <div upper-case/></div>
myApp.directive('upperCase', function() {
return {
scope: {},
template: 'Name: <input ng-model="name"></input>'
}
});

Viața este @ https://jsfiddle.net/madhanganesh/7d37w08e/

Scopul izolat este de fapt mai mult decât restricționarea completă a oricăror date care pot fi transmise în (și în afara) directivei. La un capăt al spectrului, puteți restricționa complet datele, așa cum se arată în exemplul de mai sus. Dar este posibil să treceți unul sau mai multe atribute în directivă și să le capturați ca domeniu de aplicare pentru directivă. Flexibilitatea constă în modul în care atributul transmis este interpretat în interiorul directivei. Atributul transmis directivei poate fi interpretat într-unul din cele 3 moduri:

• ca un oneway care este evaluat înainte de a fi transmis directivei
• ca un twoway o referință la o proprietate în domeniul de apelare
• ca o referință la o metodă în domeniul de apelare

Expresie

Cel care apelează directiva poate transmite în mod explicit o valoare, după cum se arată mai jos:

<div my-directive name='{{name}}' />
// an expression is passed to the directive

Modul în care este capturat în interiorul directivei este următorul:

scope: {
name: '@name' 
}

Simbolul @ îi spune lui angular să considere atributul name ca o expresie și să o evalueze înainte de a atribui valoarea proprietății text. Deoarece expresia este evaluată, este o legătură unidirecțională și orice actualizare efectuată asupra valorii în interiorul directivei nu se va reflecta în exterior.

În exemplul de mai jos, vedeți că proprietatea name este transmisă directivei. Aceasta este o expresie care este evaluată și atribuită domeniului izolat al directivei. Aceasta înseamnă că valoarea „Jack” este evaluată și atribuită ca text în interiorul directivei.

var myApp = angular.module('myApp', );
myApp.controller('MyController', function($scope) {
$scope.name = 'Jack';
});
// usage: <div my-directive name='{{name}}' />
myApp.directive('upperCase', function() {
return {
scope: {
name: '@name'
},
template: 'Name: <input ng-model="name"></input>'
}
});

Viața este @ https://jsfiddle.net/madhanganesh/ybzcryt0/4/

Pentru că name este un text în directivă, modificările sunt locale pentru directivă și nimic nu este partajat cu controlerul părinte.

Două căi (referință la proprietate)

Cel care apelează directiva poate transmite directivei o referință la o proprietate, ca în:

<div my-directive name='data.name' />
// a property reference to the directive

Modul în care este capturat în interiorul directivei este:

scope: {
name: '=name' 
}

Simbolul= îi spune lui angular să considere atributul name ca fiind o referință la o proprietate specifică din domeniul de aplicare al apelantului. Astfel, valoarea este trecută în directivă și orice modificare efectuată asupra atributului se reflectă imediat în exterior.

În exemplul de mai jos, vedeți că proprietatea name este trecută în directivă. Aceasta este o referință la proprietatea name din domeniul de aplicare părinte.

var myApp = angular.module('myApp', );
myApp.controller('MyController', function($scope) {
$scope.name = 'Jack';
});
myApp.directive('upperCase', function() {
return {
scope: {
name: '=name'
},
template: 'Name: <input ng-model="name"></input>'
}
});

Viabilitatea în direct este @ https://jsfiddle.net/madhanganesh/o74nvcj3/1/

Pentru că name este o referință la proprietatea din controler, orice modificare în ambele părți va fi reflectată în ambele.

Referință la metodă

Modul în care este transmis de la vizualizarea apelantă este:

<div my-directive nameFn="getName()" />
// a method reference is passed to the directive

Modul în care este capturat în interiorul directivei este:

scope: {
nameFn: '& nameFn'
}

& Simbolul îi spune lui angular să considere atributul nameFn ca fiind o referință la o metodă specifică a domeniului de aplicare apelant. Această metodă poate fi apoi executată din interiorul directivei atunci când este necesar.

În exemplul de mai jos, puteți vedea că proprietatea nameFn este o metodă a cărei referință este transmisă în interiorul directivei. Această funcție este executată din directivă, dar este evaluată în contextul domeniului de apelare.

var myApp = angular.module('myApp', );
myApp.controller('MyController', function($scope) {
$scope.name = 'Jack'; 
$scope.getName = function() {
return $scope.name;
}
});
myApp.directive('upperCase', function() {
return {
scope: {
nameCb: '&name'
},
//template: 'Name: <input ng-model="nameFn()"></input>'
template: 'Name: {{textCb()}}'
}
});

Viața este @ https://jsfiddle.net/madhanganesh/6w4msr5k/1/

Rezumat

După cum puteți vedea domeniul de aplicare al directivei este destul de exhaustiv, rezumatul de mai jos surprinde posibilitățile și semnificația lor.

• Default : Directiva primește același domeniu de aplicare ca și vizualizarea care o conține
• Moștenit: Directiva primește un domeniu de aplicare care este moștenit din domeniul de aplicare al vizualizării care o conține
• Izolat: Directiva primește un domeniu de aplicare independent de vizualizarea care o conține

Și în cadrul domeniului de aplicare izolat există 3 posibilități:

Oneway : Atributul directivei este considerat ca o expresie și este evaluat înainte de a fi atribuit unei proprietăți specifice din domeniul de aplicare izolat al directivei

.