Analyse d'exemples de stratégie de liaison dans les directives AngularJS-js tutoriel-php.cn

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

高洛峰

Libérer： 2016-12-24 09:51:25

original

1055 Les gens l'ont consulté

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>

Copier après la connexion

app.controller(&#39;myController1&#39;,[&#39;$scope&#39;,function($scope){
    $scope.wordCtrl="hello";
}]);
app.directive(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     template:"<div>{{word}}</div>",
     link:function(scope,ele,attr){
      scope.word=attr.word;
     }
    }
});

Copier après la connexion

Effet d'affichage :

Analyse dexemples de stratégie de liaison dans les directives AngularJS

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(&#39;test&#39;,function(){
    return{
     restrict:&#39;E&#39;,
     scope:{
      word:&#39;@&#39;
     },
     template:"<div>{{word}}</div>",
    }
});

Copier après la connexion

. 🎜>

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>

Copier après la connexion

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

Copier après la connexion

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 :

Analyse dexemples de stratégie de liaison dans les directives AngularJS

3.'&'Méthode

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

Copier après la connexion

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

Copier après la connexion

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 !