angular自定义指令scope属性学习笔记

指令在angular项目中的应用非常频繁，当它自带的指令不能满足我们的需求时，我们就需要自定义指令；

在angular，作用域是一个很重要的概念。同样的，要定义一个指令，我们也需要设置他的sope；

angular为自定义指令提供了三种scope：①不创建独立的作用域，直接使用父作用域（false）；②创建一个继承自它的父级作用域的独立作用域（true）；③创建一个完全与外部隔离的作用域（{}）；

我们创建如下的html：

<div class="out" ng-app="app" ng-controller="appCtrl">
    name:{{name}}<br/>
    <mydir></mydir>
</div>

1.当scope值为false时：

var app = angular.module('app', []);
    app.controller('appCtrl', function ($scope) {
        $scope.name = 'nico';
    })
    app.directive('mydir', function () {
        return {
            restrict: 'E',
            template: '<span>{{name}}</span>',
            scope: false,
            controller: function ($scope) {
                $scope.name = '2333'
            },
            link: function (scope, element, attrs, controller) {
            }
        }
    })

页面上的两个name都会变成“2333”，可见，当scope的值为false时，指令可以读取和修改他的父级作用域；

2.当scope的值为true时：

           restrict: 'E',
           template: '<span>{{name}}</span>',
           scope: true,
           controller: function ($scope) {
               
                       }

我们删除对name的修改：页面上显示两个“nico”；

接下来我们在指令的controller中添加对name的修改：

            restrict: 'E',
            template: '<span>{{name}}</span>',
            scope: true,
            controller: function ($scope) {
                                  $scope.name = '2333'
                        }

页面上第一个name显示为“nico”，第二个name显示为“2333”；

可见，当scope的值为true时，该指令的作用域是一个继承自其父作用域的单独的作用域（类似于构造函数的实例）；

3.当scope的值为{}时：

            restrict: 'E',
            template: '<span>{{name}}</span>',
            scope: {},
            controller: function ($scope) {
                
            },
            link: function (scope, element, attrs, controller) {
            }

此时，该指令创建一个新的作用域，其中并没有name这个属性，所以页面上只会显示一个'nico';

            restrict: 'E',
            template: '<span>{{name}}</span>',
            scope: {},
            controller: function ($scope) {
                $scope.name = '2333';
            },
            link: function (scope, element, attrs, controller) {
            }        

在指令的控制器中创建该属性时，不会影响到外部作用域；页面会显示'nico和2333'；

然而，某些时候我们需要自己的作用域，又想引用或修改父作用域的某个属性，第三种情况也为我们提供了一个通道；我们可以使用前缀标识符“@”，“=”，“&”来标示指令作用域中某个属性跟父作用域的关系；

"="：属性双向绑定，首先在html中标示对应关系：指令中的name对应父作用域的name；

<div class="out" ng-app="app" ng-controller="appCtrl">
    name:{{name}}<br/>
    <mydir name="name"></mydir>
</div>

其次，在指令的scope中指定该属性的绑定方式：

scope: {name:'='}

这样子我们就完成了name属性的双向绑定，在指令作用域中可以使用和修改父作用域的name属性；

"@":属性单向绑定，其用法与"="相似，不同的是html中的标示因为是单向绑定要用{{}}；

<div class="out" ng-app="app" ng-controller="appCtrl">
    name:{{name}}<br/>
    <mydir name="{{name}}"></mydir>
</div>
——————————————————————————————————————————
 scope: {name:'@'}

这样子，就可以在指令中使用父作用域的属性，但是不能修改；

"&"：方法单向绑定方法；

<div class="out" ng-app="app" ng-controller="appCtrl">
    name:{{name}}<br/>
    <mydir func="func()"></mydir>
</div>
——————————————————————————————————————————
 scope: {func:'&'}

这样子我们在指令中就可以使用父作用域中的方法了~