Les exemples de cet article décrivent la stratégie de liaison dans les directives AngularJS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Dans l'article précédent, nous savons comment l'instruction génère une portée indépendante. Dans cette section, nous examinerons de plus près la stratégie de liaison dans. la portée.
En général, les stratégies de liaison de portée sont divisées en trois types :
(1) @ : chaîne de liaison
(2) = : avec le contrôleur parent Liaison bidirectionnelle
(3)& : utilisé pour appeler des fonctions dans la portée parent
1 Méthode de base
<test word="{{wordCtrl}}"></test>
app.controller('myController1',['$scope',function($scope){ $scope.wordCtrl="hello"; }]); app.directive('test',function(){ return{ restrict:'E', template:"<div>{{word}}</div>", link:function(scope,ele,attr){ scope.word=attr.word; } } });
Effet d'affichage :
C'est la méthode la plus basique, qui réalise la liaison des chaînes dans la portée
2. En fait, nous pouvons réécrire Pour implémenter la méthode ci-dessus
app.directive('test',function(){ return{ restrict:'E', scope:{ word:'@' }, template:"<div>{{word}}</div>", } });
ctrl:<test word="{{wordCtrl}}"></test>
app.directive('test',function(){ return{ restrict:'E', scope:{ word:'@' }, template:"directive:<input ng-model='word' />", } });
<test greet="sayHello()"></test>
app.directive('test',function(){ return{ restrict:'E', scope:{ greet:'&' }, template:"<div ng-click='sayHello({name:'yuxiaoliang'})'>点击说HELLO</div>", } });