AngularJs指令配置参数scope详解

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AngularJs指令配置参数scope详解相关的知识,希望对你有一定的参考价值。

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

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

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

true:继承父作用域且创建独立作用域;

false:继承父作用域;

{}:不继承父作用域且创建独立作用域;

 

 

当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是指令与指令之间交互,作用域之间数据互通的重要途径,是很常用也很重要的基础知识,务必要掌握。

以上是关于AngularJs指令配置参数scope详解的主要内容,如果未能解决你的问题,请参考以下文章

AngularJs自定义指令详解 - link

angularjs Directive自定义指令详解

AngularJS 指令的 Scope (作用域)

angularJs指令的Scope(作用域)

AngularJS 指令的 Scope (作用域)

AngularJS 指令的 Scope (作用域)