首页 > 关于 AngularJs 的指令的一个问题

关于 AngularJs 的指令的一个问题

HTML 代码

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

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 上。


说的不错,项目中写组件经常会这样用

【热门文章】
【热门文章】