AngularJS指令（directive）scope作用域

AngularJs 为指令的参数scope提供了三种选择，分别是false，true，{}
默认情况下是false
首先看一下，当scope=false;

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>我的名字： {{name}}</p>
        <p>我的年龄: {{ age }}</p>
        <p my-directive></p>
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.name = "张三";
                $scope.age = 20;
            });
            app.directive("myDirective", function() {
                return {
                    restrick: "AE",
                    scope: false,
                    repace: true,
                    template: "<div>通过指令生成的" +
                              "<p>name: {{name}}</p>" +
                              "<p>年龄: {{age}}</p>" +
                              "<input type='text' ng-model='name'/><br>" +
                              "<input type='text' ng-model='age'/><br>" +   
                              "</div>"
                }
            });
    </script>

通过实例发，修改name和age值它们随之都会发生改变，这是因为他们同一作用域，绑定的值都是name和age，所有修改任意一个都会发生变化

scope=true的效果：

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>我的名字： {{name}}</p>
        <p>我的年龄: {{ age }}</p>
        <p my-directive></p>
    </div>
    <script type="text/javascript">
    
        var app = angular.module("myApp", []);
            app.controller("myCtrl", function($scope) {
                $scope.name = "张三";
                $scope.age = 20;
            });
            app.directive("myDirective", function() {
            return {
                restrick: "AE",
                scope: true,
                repace: true,
                template: "<div>" +
                          "<p>name: {{name}}</p>" +
                          "<p>age: {{age}} </p>" +
                          "<input type='text' ng-model='name'/><br>" +
                          "<input type='text' ng-model='age'/><br>" +
                          "<div>" 
            }
        });

当scope=true时，此时修改name和age，就不会改变了，
这是因为，scope形成了自己的作用域，他们的数据模型已经不是同一数据模型，所有修改自定义指令的内容不会影响controller作用域中的数据。

scope={}时，

    <div ng-app="myApp" ng-controller="myCtrl">
        <p>我的名字： {{name}}</p>
        <p>我的年龄: {{ age }}</p>
        <!-- <p my-directive></p> -->
        <p username={{name}} age="age" change="changeAge()" my-directive></p>
    </div>
    <script type="text/javascript">
    
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function($scope) {
            $scope.name = "张三";
            $scope.age = 30;
            $scope.changeAge = function() {
                $scope.age = 35;
            };
        });
        app.directive("myDirective", function() {
            return {
                restrick: "AE",
                replace: true,
                scope: {
                    name: "@username",//单数据绑定
                    age: "=age",//双向数据绑定
                    changeAge: "&change"//绑定函数 
                    //scope对象的键对值，键是绑定名字即contoller的$scope对象的名字，值是添加html的属性名
                },
                template: "<div>" +
                          "输入名：<input type='text' ng-model='name'>" +
                          "输入年龄:<input type='text' ng-model='age'>" +
                          "<button ng-click='changeAge()'>修改年龄</button>"
            }
        });

• @ 数据双向绑定前缀标识符，在元素属性中使用，例如此列中username = {{name}} 通过username的值调用绑定在$scope的数据 @绑定处理是字符串
• = 数据双绑定 ，在元素中使用，age="age", 双向绑定的数据可修改，不能是{{}}; 传递的是对象
• & 函数绑定。在元素中使用，change=changeAge() 传递的是函数指令如何同前缀表示寻找需要的属性和函数