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:
