AngularJS 全局scope與Isolate scope通訊

在項目開發時，全局scope 和 directive本地scope使用範圍不夠清晰，全局scope與directive本地scope通訊掌握的不夠透徹，這裏對全局scope 和 directive本地scope的使用作一個總結。

 

1、scope做用域

一、AngularJS中，子做用域通常都會經過JavaScript原型繼承機制繼承其父做用域的屬性和方法。但有一個例外：在directive中使用scope: { ... }，這種方式建立的做用域是一個獨立的"Isolate"做用域，它也有父做用域，但父做用域不在其原型鏈上，不會對父做用域進行原型繼承。這種方式定義做用域一般用於構造可複用的directive組件.

二、若是咱們在子做用域中訪問一個父做用域中定義的屬性，JavaScript首先在子做用域中尋找該屬性，沒找到再從原型鏈上的父做用域中尋找，若是還沒找到會再往上一級原型鏈的父做用域尋找。在AngularJS中，做用域原型鏈的頂端是$rootScope，JavaScript尋找到$rootScope爲止.

三、scope: { ... } - directive建立一個獨立的「Isolate」做用域，沒有原型繼承。這是建立可複用directive組件的最佳選擇。由於它不會直接訪問/修改父做用域的屬性，不會產生意外的反作用。

 

2、Isolate scope 引用修飾符

一、 = or =attr 「Isolate」做用域的屬性與父做用域的屬性進行雙向綁定，任何一方的修改均影響到對方，這是最經常使用的方式；

二、 @ or @attr 「Isolate」做用域的屬性與父做用域的屬性進行單向綁定，即「Isolate」做用域只能讀取父做用域的值，而且該值永遠的String類型；

三、 & or &attr 「Isolate」做用域把父做用域的屬性包裝成一個函數，從而以函數的方式讀寫父做用域的屬性，包裝方法是$parse

 

3、directive 與 controller 數據傳遞和通訊

一、父controller監聽全局scope(父scope)變量, 並廣播事件給子scope(directive scope,每一個directvie都有本身獨立的scope做用域)

二、directive 定義本地scope,經過=、@、&(方法)字符顯示引用全局scope

三、directive scope(子scope)經過parent[$scope.$parent.xxx]引用全局scope的屬性

四、directive監聽全局scope變量變化,能夠經過$scope.$parent.$watch方法

4、實例說明

<div ng-controller="MyCtrl">
   <button ng-click="show=true">show</button>
   <dialog title="Hello }"
           visible="}"
           on-cancel="show=false;"
           on-ok="show=false;parentScope();">
       <!--上面的on-cancel、on-ok，是在directive的isoloate scope中經過&引用的。
       若是表達式中包含函數，那麼須要將函數綁定在parent scope（當前是MyCtrl的scope）中-->
       Body goes here: username:} , title:}.
       <ul>
           <!--這裏還能夠這麼玩~names是parent scope的-->
           <li ng-repeat="name in names">}</li>
       </ul>
       <div>
           Email:<input type="text" ng-model="email" style="width: 200px;height:20px"/>
       </div>
       <div>
           Count:<input type="text" ng-model="person.Count" style="width: 120px;height:20px"/>
           <button ng-click="changeCount()">Count加1</button>
       </div>
       <p></p>
   </dialog>
</div>

　　Controller 測試代碼:

var app = angular.module("Dialog", []);
   app.controller("MyCtrl", function ($scope) {
       $scope.person = {
           Count: 0
       };
       $scope.email = 'carl@126.com';
       $scope.names = ["name1", "name2", "name3"];
       $scope.show = false;
       $scope.username = "carl";
       $scope.title = "parent title";
       $scope.parentScope = function () {
           alert("scope裏面經過&定義的東東，是在父scope中定義");
       };
 
 
       $scope.changeCount = function () {
           $scope.person.Count = $scope.person.Count + 1;
       }
 
 
       // 監聽controller count變動, 併發出事件廣播,再directive 中 監聽count CountStatusChange變動事件
       $scope.$watch('person.Count', function (newVal, oldVal) {
           console.log('>>>parent Count change:' + $scope.person.Count);
           if (newVal != oldVal) {
               console.log('>>>parent $broadcast count change');
               $scope.$broadcast('CountStatusChange', {"val": newVal})
           }
       });
 
 
   });
 
 
   app.directive('dialog', function factory() {
       return {
           priority: 100,
           template: ['<div ng-show="visible">',
               '    <h3>}</h3>',
               '    <div class="body" ng-transclude></div>',
               '    <div class="footer">',
               '        <button ng-click="onOk()">OK</button>',
               '        <button ng-click="onCancel()">Close</button>',
               '    </div>',
               '</div>'].join(""),
           replace: false,
           transclude: true,
           restrict: 'E',
           scope: {
               title: "@",//引用dialog標籤title屬性的值
               visible: "@",//引用dialog標籤visible屬性的值
               onOk: "&",//以wrapper function形式引用dialog標籤的on-ok屬性的內容
               onCancel: "&"//以wrapper function形式引用dialog標籤的on-cancel屬性的內容
           },
           controller: ['$scope', '$attrs', function ($scope, $attrs) {
 
 
 
 
               // directive scope title 經過@ 引用dialog標籤title屬性的值，因此這裏能取到值
               console.log('>>>title:' + $scope.title);
               >>>title:Hello carl scope.html:85
 
 
               // 經過$parent直接獲取父scope變量頁能夠
               console.log('>>>parent username:' + $scope.$parent.username);
               >>>parent username:carl
 
 
               // directive scope 沒有定義username 變量,而且沒有引用父scope username變量, 因此這裏是undefined
               console.log('>>>child username:' + $scope.username);
               >>>username:undefined
 
 
 
 
               // 接收由父controller廣播count變動事件
               $scope.$on('CountStatusChange', function (event, args) {
                   console.log("child scope on(監聽) recieve count Change event :" + args.val);
               });
 
 
               // watch 父 controller scope對象
               $scope.$parent.$watch('person.Count', function (newVal, oldVal) {
                   console.log('>>>>>>>child watch parent scope[Count]:' + oldVal + ' newVal:' + newVal);
               });
 
 
           }]
       };
   });