Template, scope e composizione di direttive

6 ottobre 2015

Nell’esempio precedente abbiamo introdotto la definizione di una nuova direttiva che abbiamo chiamato my-select-city. Riprendiamone la definizione:

angular.module("myApp", []) 
	.directive("mySelectCity", function() { 
		return { 
			restrict: "E", 
			templateUrl: "/mySelectCityTemplate.html" 
		}; 
	});
<script type="text/ng-template" id="/mySelectCityTemplate.html"> 
	<select ng-model="selectedItem"> 
		<option ng-repeat="citta in elencoCitta" value="citta.codice">{{citta.nome}}</option> 
	</select> 
</script>

Vi troviamo due importanti novità rispetto a quanto abbiamo visto finora sulle direttive.

La prima novità riguarda il fatto che abbiamo utilizzato delle direttive all’interno del markup della nostra direttiva: ng-model e ng-option. Questo vuol dire che una direttiva può essere il risultato della composizione di altre direttive, con conseguenze quindi incredibili sulle potenzialità di questo approccio: possiamo estendere e comporre direttive esistenti senza toccare il loro codice ed ottenendo componenti più vicini alle nostre esigenze.

La seconda novità riguarda l’uso di variabili e di espressioni Angular all’interno del markup. Sappiamo che in una view questi elementi fanno riferimento ad un modello di dati aggangiato allo scope del relativo controller, ma per le direttive non abbiamo parlato né di scope né di controller.

Lo scope a cui fanno riferimento le variabili e le espressioni utilizzate nel template di una direttiva è lo scope del controller la cui view contiene la direttiva. Nel nostro caso, quindi, se la nostra applicazione ha la seguente view:

<div ng-controller="myController"> 
	<my-select-city></my-select-city> 
</div> 

legata al seguente controller:

angular.module("myApp", []) 
	.controller("myController", function($scope) {      
		$scope.elencoCitta = [ 
			{codice: "RM", nome: "Roma"},   
			{codice: "MI", nome: "Milano"}, 
			{codice: "NA", nome: "Napoli"}, 
			{codice: "PA", nome:"Palermo"} 
		]; 
	}); 

le variabili e le espressioni Angular contenute nel template della direttiva my-select-city verranno risolte prendendo come riferimento lo scope del controller myController ottenendo il seguente risultato:

Tutte le lezioni

1 ... 30 31 32 ... 38

Se vuoi aggiornamenti su Template, scope e composizione di direttive inserisci la tua e-mail nel box qui sotto:
Tags:
 
X
Se vuoi aggiornamenti su Template, scope e composizione di direttive

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy