AngularJs指令配置參數scope詳解

時間 2019-11-30

標籤 angularjs 指令配置參數 scope 詳解欄目 AngularJS 简体版

原文原文鏈接

AngularJs最重要也是最難理解的模塊之一就是它的指令（directive）了，自定義指令配置有不少個參數，下面我只說說其中scope的配置極其含義。javascript

scope表示指令的做用域，它有三個可選值：true、false、對象{}。java

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

true：繼承父做用域且建立獨立做用域；app

false：繼承父做用域；函數

{}：不繼承父做用域且建立獨立做用域；spa

分別是什麼意思呢？看真實demo:雙向綁定

源碼：rest

<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>

分別修改父域、子域裏的值會發現：code

scope爲true時，修改父域的值會影響到子域，修改子域不影響父域，由於子域是獨立的；對象

scope爲 false時，修改父域的值會影響子域，修改子域也會影響父域，是雙向綁定，scope配置默認值是false；blog

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>