Analyse d'exemples de stratégie de liaison dans les directives AngularJS

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>",
    }
});

. 🎜>

vous pouvez supprimer la fonction de lien et ajouter @binding, afin que la liaison de chaîne des attributs dans l'instruction et la portée de l'instruction puisse être réalisée avec succès.

3.'='binding

Si vous utilisez = liaison, vous pouvez non seulement modifier la valeur dans la portée de l'instruction, mais également modifier la valeur dans le contrôleur parent pour obtenir deux liaison à plusieurs voies.

Exemple :

   ctrl:
   

<test word="{{wordCtrl}}"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      word:'@'
     },
     template:"directive:<input ng-model=&#39;word&#39; />",
    }
});

L'effet est de changer la portée dans le commande La valeur modifiera également la valeur de la variable correspondante dans le contrôleur, réalisant une liaison bidirectionnelle entre le contrôleur et la portée dans l'instruction.

L'effet est le suivant :

3.'&'Méthode

<test greet="sayHello()"></test>

app.directive('test',function(){
    return{
     restrict:'E',
     scope:{
      greet:'&'
     },
     template:"<div ng-click=&#39;sayHello({name:&#39;yuxiaoliang&#39;})&#39;>点击说HELLO</div>",
    }
});

Faites attention à la méthode de transmission des paramètres.

J'espère que cet article sera utile à tous ceux qui programment AngularJS.

Pour plus d'articles sur l'analyse des exemples de stratégie de liaison dans les instructions AngularJS, veuillez faire attention au site Web PHP chinois !