AngularJs指令配置參數scope詳解
阿新 • • 發佈:2017-07-04
便在 指令 getname 可選 獨立 con func tex 掌握
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詳解