AngularJs指令配置参数scope详解

AngularJs最重要也是最难理解的模块之一就是它的指令（directive）了，自定义指令配置有很多个参数，下面我只说说其中scope的配置极其含义。

scope表示指令的作用域，它有三个可选值：true、false、对象{}。

.directive("myDirective", function(){
        return {
            restrict: "EA",
            scope: true/false/{},
            template: "<div>{{content}}</div>"
        }
})

true：继承父作用域且创建独立作用域；

false：继承父作用域；

{}：不继承父作用域且创建独立作用域；

分别是什么意思呢？看真实demo:

源码：

<div ng-app="myModule">
    <h3>请分别修改父、子作用域表单里的值</h3>
    <div ng-controller="myController">
        指令配置：scope: true <br/>
        父作用域：<input type="text" ng-model="content" /><br/>
        子作用域：<my-directive></my-directive><br/><br/>
    </div>
    <div ng-controller="myController2">
        指令配置：scope: false <br/>
        父作用域：<input type="text" ng-model="content" /><br/>
        子作用域：<my-directive2></my-directive2><br/><br/>
    </div>
    <div ng-controller="myController3">
        指令配置：scope: {} <br/>
        父作用域：<input type="text" ng-model="content" /><br/>
        子作用域：<my-directive3></my-directive3>
    </div>

</div>
<script type="text/javascript">
    var myModule = angular.module("myModule", []);
    myModule.controller("myController", ['$scope', function($scope){
        $scope.content = "自定义指令";
    }])
    myModule.controller("myController2", ['$scope', function($scope){
        $scope.content = "自定义指令";
    }])
    myModule.controller("myController3", ['$scope', function($scope){
        $scope.content = "自定义指令";
    }])
    myModule.directive("myDirective", function(){
        return {
            restrict: "EA",
            scope: true,
            template: "<input type='text' ng-model='content' />"
        }
    })
    myModule.directive("myDirective2", function(){
        return {
            restrict: "EA",
            scope: false,
            template: "<input type='text' ng-model='content' />"
        }
    })
    myModule.directive("myDirective3", function(){
        return {
            restrict: "EA",
            scope: {},
            template: "<input type='text' ng-model='content' />"
        }
    })
</script>

分别修改父域、子域里的值会发现：

scope为true时，修改父域的值会影响到子域，修改子域不影响父域，因为子域是独立的；

scope为 false时，修改父域的值会影响子域，修改子域也会影响父域，是双向绑定，scope配置默认值是false；

scope为{}时，修改父域的值不影响子域，修改子域也不会影响父域，子域是完全隔离的作用域；

另外，当scope为非空对象时，父域和子域可以以指定的方式传递指定的数据，这就是指令与指令之间的交互。

数据传递也分三种方式：@、=、&，先看demo：

源码：

<div ng-app="myModule">
    <h3>请分别修改父、子作用域表单里的值</h3>
    <div ng-controller="myController">
        父作用域：<br/>
        <input type="text" ng-model="name" /><br/>
        <input type="text" ng-model="sex" /><br/>
        <input type="button" ng-click="say()" value="点击执行父域的say方法" /><br/>
        子作用域：<br/>
        <my-directive my-name="{{name}}" my-sex="sex" get-name='say()'></my-directive><br/>
    </div>

</div>
<script type="text/javascript">
    var myModule = angular.module("myModule", []);
    myModule.controller("myController", ['$scope', function($scope){
        $scope.name = "wangmeijian";
        $scope.sex = "boy";
        $scope.say = function(){
            alert( $scope.name +" is a"+ $scope.sex )
        }
    }])
    myModule.directive("myDirective", function(){
        return {
            restrict: "EA",
            scope: {
                myName: "@",
                mySex: "=",
                getName: "&"
            },
            template: "<input type='text' ng-model='myName' /><br/>"+
                      "<input type='text' ng-model='mySex' /><br/>"+
                      "<input type='button' ng-click='getName()' value='点击执行子域的say方法' />"
        }
    })

</script>

@：单向引用父域的值，传递的值必须是字符串且在指令里引用时必须加上{{}}；

=：双向绑定子域和父域；

&：单向绑定父域，以便在其中运行函数

总结：scope是指令与指令之间交互，作用域之间数据互通的重要途径，是很常用也很重要的基础知识，务必要掌握。

 

作者：古德God
出处：http://www.cnblogs.com/wangmeijian
本文版权归作者和博客园所有，欢迎转载，转载请标明出处。
如果您觉得本篇博文对您有所收获，请点击右下角的 [推荐]，谢谢！