AngularJs指令配置參數scope詳解

標籤：getname   多個   log   function   img   rip   var   cli   put   

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

scope表示指令的範圍，它有三個可選值：true、false、對象{}。

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

true：繼承父範圍且建立獨立範圍；

false：繼承父範圍；

{}：不繼承父範圍且建立獨立範圍；

 

 

當scope為非Null 物件時，父域和子域可以以指定的方式傳遞指定的資料，這就是指令與指令之間的互動。

資料傳遞也分三種方式：@、=、&，先看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詳解