angularjs中指令的scope作用域

angularjs中指令的作用域方式主要分为三种：

• scope=true;
• scope=false;
• scope={}`这里空批指里面可以指定作用域的方式

下面将分别讲解这三种指令的作用域方式：

scope=false

这种情况下，scope可以使用父作用域中的变量，函数首先让我们创建一个指令，代码如下：
a.html

<div ng-app="MyApp">
    <div class="container" ng-controller="MyController">
        <div class="my-info">我的名字是：<span ng-bind="name"></span>
        <!-- 使用"ng-bind"防止网络状态不佳时出现没有被赋值表达式   -->
            <br/>我的年龄是：<span ng-bind="age"></span>

        </div>
        <!-- 使用属性声明指令 -->
        <div class="my-directive" my-directive></div>
    </div>
</div>

a.js

angular.module("MyApp", [])
    .controller("MyController", function ($scope) {
        //J1 这里我们在作用域里初始化两个变量
    $scope.name = "dreamapple";
    $scope.age = 20;
        //J2 创建一个方法，修改我们创建的对象的年龄
    $scope.changeAge = function () {
        $scope.age = 22;
    }
})
        //J3 创建我们的指令，指令名字为"myDirective"

    .directive("myDirective", function () {
    var obj = {
        //J4   指令的声明模式为 "AE" 属性和元素
        restrict: "AE",
        //J5   指令继承父作用域的属性和方法
        scope: false,
        replace: true,
        template: "<div class='my-directive'>" +
            "<h3>下面部分是我们创建的指令生成的</h3>" +
            "我的名字是：<span ng-bind='name'></span><br/>" +
            "我的年龄是：<span ng-bind='age'></span>" +
            "<input type='text' ng-model='name'>"+
            " </div>"
    }
    return obj;
});

解释一下上面的代码，在指令定义部分，我们可以直接使用父作用域中的name和age。而且，变了指令中的name，父作用域中的她会变。

scope=true

这个就是把上面代码中的false改成true，所以代码就不用贴了。如上代码所示，当这样设置时，要示我们指令自己创建一个新的作用域而不是使用父的，但是它还是会继承来自父的一些变量和函数。这些来自父的变量是用来初始化的，如果你变了变量的值，那么新建的变量是会在新的作用域中的。、
而如果是false，你改变了就会把父中的变量值也变了，因为他们中是一个。

scope={}

先上代码吧
a.html

<div ng-app="MyApp">
    <div class="container" ng-controller="MyController">
        <div class="my-info">我的名字是：<span ng-bind="name"></span>

            <br/>我的年龄是：<span ng-bind="age"></span>
            <br />`这里写代码片`
        </div>
        <div class="my-directive" my-directive my-name="{{name}}" age="age"  change-my-age="changeAge()"></div>
    </div>
</div>

a.js

angular.module("MyApp", [])
    .controller("MyController", function ($scope) {
    $scope.name = "dreamapple";
    $scope.age = 20;
    $scope.changeAge = function(){
        $scope.age = 0;
    }
})
    .directive("myDirective", function () {
    var obj = {
        restrict: "AE",
        scope: {
            name: '@myName',
            age: '=',
            changeAge: '&changeMyAge'
        },
        replace: true,
        template: "<div class='my-directive'>" +
            "<h3>下面部分是我们创建的指令生成的</h3>" +
            "我的名字是：<span ng-bind='name'></span><br/>" +
            "我的年龄是：<span ng-bind='age'></span><br/>" +
            "在这里修改名字：<input type='text' ng-model='name'><br/>" +
            "<button ng-click='changeAge()'>修改年龄</button>" +
            " </div>"
    }
    return obj;
});

*@ 当指令编译到模板的name时，就会到scope中寻找是否含有name的键值对，如果存在，就像上面那样，看到@就知道这是一个单向的数据绑定，然后寻找原来的那个使用指令的元素上（或者是指令元素本身）含有这个值的属性即my-name={{name}}，然后在父作用域查找{{name}}的值，得到之后传递给模板中的name。重点内容
如上所示，在代码中，我们设置scope=false,这时候我们可以把一部分设置为false(和父中同步)，一部分变量设置为true（和父中不同步，有自己的model）.*

@(针对于变量的，子相当于有自己的独立作用域，所以子中的变了就是父中的不会变)

这是一个单项绑定的前缀标识符
使用方法：在元素中使用属性，好比这样

，注意，属性的名字要用-将两个单词连接，因为是数据的单向绑定所以要通过使用{{}}来绑定数据。

=（针对变量的，子中不会创建自己的作用域，如果子中的变量值变了，父中的不会变）
这是一个双向数据绑定前缀标识符
使用方法：在元素中使用属性，好比这样

,注意，数据的双向绑定要通过=前缀标识符实现，所以不可以使用{{}}。

&（针对函数的）
这是一个绑定函数方法的前缀标识符
使用方法：在元素中使用属性，好比这样

，注意，属性的名字要用-将多个个单词连接。