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:'' 實際上相當於 ;

4.因為指令會建立一個新的子作用域，而這個自作用域可以存取它的父級作用域，也就是控制器MainController 的$scope，所以相當於輸入框和我們的指令都被雙向綁定到了目前作用域的$scope.testname 上。