scope
scope
Par défaut la directive utilise le scope de la vue HTML dans laquelle elle a été utilisée (le scope parent). Si cette option est vrai, la directive utilise son propre scope en héritant du scope parent. La directive peut aussi posséder un scope isolé (indépendant du scope parent). Ci-dessous, un exemple d'une directive qui a un scope isolé.
Exemple : Le scope Isolé
CTRL+C pour copier, CTRL+V pour coller
1
var myModule = angular.module(...);
2
myModule.directive('directiveName', function (injectables) {
3
return {4
restrict: 'A',
5
replace: true,
6
scope: {
7
title: '@', // @ pour passez une chaine de caractère (one-way binding)
8
count : '=', // = pour passez un objet, two-way binding
9
compute: '&' // & pour passez une fonction
10
},
11
template: '<div> the title is: {{title}}
12
{{count}} <span ng-click="compute()"> compute </span> 13
</div>',14
};
15
});
var myModule = angular.module(...);
myModule.directive('directiveName', function (injectables) {
return {
restrict: 'A',
replace: true,
scope: {
title: '@', // @ pour passez une chaine de caractère (one-way binding)
count : '=', // = pour passez un objet, two-way binding
compute: '&' // & pour passez une fonction
},
template: '<div> the title is: {{title}}
{{count}} <span ng-click="compute()"> compute </span>
</div>',
};
});CTRL+C pour copier, CTRL+V pour coller
1
...
2
<div ng-controller="myController">
3
...
4
...
5
<directive-name title="eventName" count="voteNumber" compute="getNewCount()" />
6
<!-- c'est comme le passage des paramètres dans les fonctions. Ici, eventName, voteNumber et getNewCount doivent être attachés au $scope associé au contrôleur "myController" -->7
...
8
</div>9
...
...
<div ng-controller="myController">
...
...
<directive-name title="eventName" count="voteNumber" compute="getNewCount()" />
<!-- c'est comme le passage des paramètres dans les fonctions. Ici, eventName, voteNumber et getNewCount doivent être attachés au $scope associé au contrôleur "myController" -->
...
</div>
...
