指令与控制器间的通信详解

在指令与控制器的通信中，我们一般会在指令内使用scope{@ = &}这三种关系，分别是单向绑定，双向绑定，函数。如：

 scope: {
            name: '@myName',
            ages: '=',
            sex:'=sexs',
            ceo:'=positions',
            changeAge: '&changeMyAge',
            changeName:'&changeMyName'
        },

看去貌似没什么东西，但是想知道哪跟哪是对应关系，为了测这个我也是醉了。没办法，为了理解深刻自己测了好久。
这里的绑定关系应该是指‘中间键’关系。
<hello my-name="{{name}}" age="age" sexs='sex' positions='ceod' change-my-age="changeAge()" change-my-name="changeName()"></hello>
这行代码是html页面中该指令的代码。另外

$scope.name = "dreamapple";
    $scope.age = 20;
    $scope.positionName='android';
    $scope.sex='mr.man';
    $scope.ceod='dfjsdofj';
    $scope.changeAge = function(){
        $scope.age = 22;
        $scope.sex='man';
    }
    $scope.changeName = function(){
                $scope.name="老帅哥";
            }

这上面的代码是控制器中的。
可以看出，在控制器中的一些属性名跟指令中的一些字段名是一样的有些是不同的，在html中的指令属性内可以看出指-控间的关系。

我还是贴出完整的指令内容吧↓

glb.directive('hello',function(){//指令与控制器间交互
     var obj = {
        restrict: "AE",
        scope: {
            name: '@myName',
            age: '=',
            sex:'=sexs',
            ceo:'=positions',
            changeAge: '&changeMyAge',
            changeName:'&changeMyName'

        },
        replace: true,
        template: "<div>" +
            "<h3>下面部分是我们创建的指令生成的</h3>" +
            "我的名字是：<span ng-bind='name'></span><br/>" +
            "我的年龄是：<span ng-bind='age'></span><br/>" +
            "我的年龄是：<input ng-model='age'></input><br/>" +
            "我的性别是：<span ng-bind='sex'></span><br/>" +
            "我的职位是：<span ng-bind='ceo'></span><br/>" +
            "我的性别是：<input type='text' ng-model='sex'></input><br/>" +
             "我的职位是：<input ng-model='ceo'></input><br/>" +
            "在这里修改名字：<input type='text' ng-model='name'><br/>" +
            "<button ng-click='changeAge()'>修改年龄</button><br/>" +
            "<button ng-click='changeName()'>修改名字</button>" +
            " </div>"
    }
    return obj;
})

还有完整的控制器中的内容↓

glb.controller('myCtrl',['$scope',function($scope){
     $scope.name = "dreamapple";
    $scope.age = 20;
    $scope.positionName='android';
    $scope.sex='mr.man';
    $scope.ceod='dfjsdofj';
    $scope.changeAge = function(){
        $scope.age = 22;
        $scope.sex='man';
    }
    $scope.changeName = function(){
                $scope.name="老帅哥";
            }
}])

以及html中的相关内容↓

<div ng-controller="myCtrl">
              <div >我的名字是：<span ng-bind="name"></span>

            <br/>我的年龄是：<span ng-bind="age"></span>
            <br/>我的岗位是：<span ng-bind="positionName"></span>
            <br />我的性别是：<span ng-bind="sex"></span>
            <br />我的ceod是：<span ng-bind="ceod"></span>
        </div>
        <hello my-name="{{name}}" age="age" sexs='sex' positions='ceod' change-my-age="changeAge()" change-my-name="changeName()"></hello>

从指令中的scope内的属性跟html页面中的hello指令的属性对比来看有什么发现没，首先，可以看出@相关的写法都是方法指令的值在页面指令中当属性来写，并且绑定的内容是方法指令中的属性，如果是绑定控制器中属性名的话，页面结果显示还是绑定方法指令跟控制器无关。 显示结果↓

总结出：@单向绑定不论页面指令绑定值是方法指令的还是控制器的还是一样的属性名，其结果都是只跟自身指令有关与控制器无关（如果绑定的属性名一样，则初始化时指令的值与控制器相同）。

另外经过测试，如果是@单向绑定的话，在页面hello指令内可以不写，系统默认会加上去。不过这样的话，初始化的值就不是对应在控制器中同名的属性值了，而默认初始值是空的。

如果是=双向绑定的话，在页面hello指令中必须要写，不然会报错的。另外说明下，如果在方法指令的scope中属性的值只有@/=则默认是‘@/= 对应的属性名’。

如果页面中指令属性的值是方法指令属性（跟控制器中的属性名字相同，如上图sex属性）则在指令中改变值，控制器中的属性名字相同的值也会跟着改变(初始化时指令的值是引用控制器中对应属性名的值，并且指令中更改值，控制器中也会跟着改变)。
同理取反，结果在下面。

如果页面中指令属性的值是跟控制器中的属性名字相同，但跟方法指令中的属性名不同，则只双向绑定方法指令中的内容，已与控制器无关了（指令初始化内容为空）。如图所示

页面结果显示↓

总结得出：=双向绑定，如果页面指令中绑定的值是方法指令跟控制器中属性一样，则指令中改变，控制器值也改变（初始化时方法指令的值是引用控制器中对应属性名相同的值）。否则，不论页面指令中绑定的值是方法指令中的还是控制器中的（两个属性名不同），显示结果都是只改变方法指令生成的内容范围。对控制器无影响（初始化时方法指令的值为空）。
最后是函数的&的使用，该函数体是写在控制器中的。对控制器中的属性做出一些事件更改。在方法指令模板中要有该函数的事件，比如ng-click=’changeAge()’事件，并且在页面指令中要写出改函数方法。