AngularJS-direktiivi – Scopes

Tämä saavutetaan määrittelemällä direktiivin määrittelyssä scope as

scope: {}

.

Oheisessa esimerkissä eristetty scope saavutetaan välittämällä direktiiviin tyhjä objekti {}.

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

Live fiddle on @ https://jsfiddle.net/madhanganesh/7d37w08e/

Isoleerattu scope on oikeastaan muutakin kuin se, että se rajoittaa täysin minkä tahansa datan välittämistä direktiiviin (ja sieltä pois). Toisessa ääripäässä voit rajoittaa dataa täysin kuten yllä olevassa esimerkissä. On kuitenkin mahdollista siirtää yksi tai useampi attribuutti direktiiviin ja kaapata ne direktiivin soveltamisalaksi. Joustavuus tulee tavasta, jolla välitettyä attribuuttia tulkitaan direktiivin sisällä. Direktiiviin välitetty attribuutti voidaan tulkita jollakin seuraavista kolmesta tavasta:

• kuin oneway, joka arvioidaan ennen välittämistä direktiiviin
• kuin twoway viittaus omaisuuteen kutsutussa laajuudessa
• kuin viittaus metodiin kutsutussa laajuudessa

Ilmoitus

Direktiivin kutsuja voi välittää eksplisiittisesti arvon alla olevan kuvan mukaisesti:

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

Tapa, jolla se kaapataan direktiivin sisällä, on:

scope: {
name: '@name' 
}

@-symboli kertoo angularille, että se pitää name-attribuuttia lausekkeena ja arvioi sen ennen arvon antamista text-ominaisuudelle. Koska lauseke evaluoidaan, kyseessä on yksisuuntainen sidonta, eikä direktiivin sisällä tehty arvon päivitys heijastu direktiivin ulkopuolelle.

Oheisessa esimerkissä näet, että name-ominaisuus välitetään direktiiviin. Tämä on lauseke, joka evaluoidaan ja osoitetaan direktiivin eristettyyn scopeen. Tämä tarkoittaa, että arvo ”Jack” evaluoidaan ja osoitetaan tekstinä direktiivin sisällä.

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

Live fiddle is @ https://jsfiddle.net/madhanganesh/ybzcryt0/4/

Koska name on tekstinä direktiivissä, muutokset ovat paikallisia direktiivissä eikä mitään jaeta vanhemman kontrollerin kanssa.

Kaksisuuntainen (viittaus omaisuuteen)

Direktiivin kutsuja voi välittää direktiiville viittauksen omaisuuteen, kuten:

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

Tapa, jolla se kaapataan direktiivin sisällä, on:

scope: {
name: '=name' 
}

=-symboli käskee angularia pitämään name-attribuuttia viittauksena tiettyyn omaisuuteen kutsuvassa scopeissa. Arvo siis välitetään direktiiviin ja kaikki attribuuttiin tehdyt muutokset heijastuvat välittömästi ulospäin.

Oheisessa esimerkissä näet, että name-ominaisuus välitetään direktiiviin. Tämä on viittaus name-ominaisuuteen vanhempien scopeissa.

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

Live fiddle on @ https://jsfiddle.net/madhanganesh/o74nvcj3/1/

Koska name on viittaus ominaisuuteen ohjaimessa, kaikki muutokset kummallakin puolella heijastuvat molempiin.

Viittaus metodiin

Tapa, jolla se siirretään kutsuvasta näkymästä on:

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

Tapa, jolla se kaapataan direktiivin sisällä on:

scope: {
nameFn: '& nameFn'
}

& symboli kertoo angularille, että se pitää nameFn-attribuuttia viittauksena tiettyyn kutsuvan scopein metodiin. Tämä metodi voidaan sitten tarvittaessa suorittaa direktiivin sisältä.

Oheisessa esimerkissä nameFn-ominaisuus on metodi, jonka viite välitetään direktiivin sisällä. Tämä funktio suoritetaan direktiivin sisältä, mutta se arvioidaan kutsuvan scope:n kontekstissa.

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

Live fiddle is @ https://jsfiddle.net/madhanganesh/6w4msr5k/1/

Yhteenveto

Kuten huomaat direktiivin scope on melko tyhjentävä, alla oleva yhteenveto kiteyttää mahdollisuudet ja niiden merkityksen.

• Oletusarvo : Direktiivi saa saman scope:n kuin sen sisältävä näkymä
• Peritty: Direktiivi saa laajuuden, joka periytyy sisältävän näkymän laajuudesta
• Isolated: Direktiivi saa soveltamisalan, joka on riippumaton sisältävästä näkymästä

Ja eristetyn soveltamisalan sisällä on 3 vaihtoehtoa:

Oneway : Direktiivin attribuuttia pidetään lausekkeena ja se arvioidaan ennen kuin se osoitetaan direktiivin eristetyn soveltamisalan tiettyyn ominaisuuteen

.