angulaire.js - Une question sur les directives AngularJs

Question

Code HTML

<p ng-controller="MainController">
    control:<input type="text" ng-model="testname" />
    directive:<xingoo name="testname"></xingoo>
</p>

Code angulaire

var myAppModule = angular.module('myApp', []);
myAppModule
        .controller('MainController', function($scope){
            $scope.testname = 'my name is xingoo';
        })
        .directive('xingoo', function(){
            return{
              restrict:'AE',
                scope:{
                    name:'='
                },
                template:'<input type="text" ng-model="name"/>',
                replace:true
            };
        });

Sous ces deux morceaux de code, la zone de saisie du contrôle est liée à la zone de saisie de la commande. Toute modification de la valeur d'un côté entraînera des modifications de l'autre côté. C’est ma compréhension. Je ne sais pas si c’est vrai ou non. J’espère que Dieu pourra m’éclairer :

1. Tout d'abord, dans le contrôleur MainController, nous utilisons ng-model pour lier de manière bidirectionnelle la zone de saisie et une valeur testname dans la portée actuelle de MainController ;

2. Dans la directive, nous avons spécifié scope:{name:'='}, donc Angular liera name sous la forme d'une variable, et la valeur que nous transmettons pour name est testname

3. Ainsi, dans le modèle : '<input type="text" ng-model="name" />' est en fait équivalent à <input type="text" ng-model="textname"/ >;

4. Parce que l'instruction créera une nouvelle portée enfant et que cette portée autonome peut accéder à sa portée parent, qui est la portée $ du contrôleur MainController, la zone de saisie et notre instruction sont toutes deux liées de manière bidirectionnelle à $scope. .testname dans la portée actuelle.

Answer 1

C'est vrai, ceci est souvent utilisé lors de l'écriture de composants dans des projets