angular.js - 关于 AngularJs 的指令的一个问题

HTML 代码

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

Angular 代码

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

在这两段代码下，control 的输入框被和指令的输入框绑定到了一起，任意改变一边的值都会引起另外一边的改变。我的理解是这样的，不知道对不对，希望大神能不吝赐教：

1.首先在控制器 MainController 中，我们通过 ng-model 将输入框和 MainController 的当前作用域中的一个值 testname 进行了双向绑定；

2.在指令中，我们指定了 scope:{name:'='}，所以 Angular 会以变量的形式去绑定 name ，而 name 我们传入的值是 testname；

3.所以，在 template:'<input type="text" ng-model="name" />' 实际上相当于 <input type="text" ng-model="textname"/>；

4.因为指令会创建一个新的子作用域，而这个自作用域可以访问它的父级作用域，也就是控制器 MainController 的 $scope，所以相当于输入框和我们的指令都被双向绑定到了当前作用域的 $scope.testname 上。

天蓬老师2745 天前459

angular.js - 关于 AngularJs 的指令的一个问题

全部回复(1)我来回复