angularjs指針（directive）中的作用域（scope）的隔離作用域學習研究 ...
您好，昨天學習了指令作用域為布爾型的情況，
今天主要研究其指針作用域為{}的情況
1、當作用域scope為{}時，子作用域完全創建一個獨立的作用域，
此時，子做預約和外部作用域完全不數據交互
但是，在實際應用中，子做作用域也還是要和外部數據交互。
為止，引入了數據綁定概念
2、隔離作用域數據綁定有三種方式：
其一、“@”
格式為：
scope{
屬性名稱:"@"
}
子外作用域數據交互表現：
隔離的子作用域和外部作用域實現單向數據綁定，
及外部對應值改變，子作用域值也改變，子作用域值改變父作用域值不改變
其二、“=”：
格式為：
scope{
屬性名稱:"@"
}
子外作用域數據交互表現：
隔離的子作用域和外部作用域實現雙向數據綁定，
及外部對應值改變，子作用域值也改變，子作用域值改變父作用域值也改變
其三、“&”：
格式為：
scope{
屬性名稱:"&"
}
子外作用域數據交互表現：
隔離的子作用域和外部作用域實現實現函數交互，
及子作用域可以調用外部作用域函數
下麵來一個練習：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body ng-app="myApp" ng-init="message='person infor'" ng-controller="myContro"> <h4>外部控制器</h4> <div>person message:{{message}}</div> <input type="text" ng-model="message" /> <br /> <br /> <h4>scope={}時，完全隔離一個子作用域，不能與外部進行數據交互</h4> <div my-direct> </div> <br /> <br /> <h4> scope={@}時，隔離的子作用域和外部作用域實現單向數據綁定， <br />及外部對應值改變，子作用域值也改變，子作用域值改變父作用域值不改變 </h4> <div my-direct2 message="{{message}}"> </div> <br /> <br /> <h4> scope={=}時，隔離的子作用域和外部作用域實現雙向數據綁定， <br />及外部對應值改變，子作用域值也改變，子作用域值改變父作用域值也改變 </h4> <div my-direct3 message="message"> </div> <br /> <br /> <h4> scope={&}時，隔離的子作用域和外部作用域實現實現函數交互， <br />及子作用域可以調用外部作用域函數 </h4> <div my-direct4 get-date="getDate()"> </div> </body> </html> <script src="Scripts/angular.js"></script> <script type="text/javascript"> var app = angular.module("myApp", []); app.controller("myContro", function ($scope, $filter) { $scope.getDate = function () { $scope.message = $filter("date")(Date.now(),"yyyy-MM-dd HH:mm:ss"); } }); app.directive("myDirect", function () { return { restrict: "A", replace: true, scope:{}, template: "<div ng-init=\"message='child infor'\">\ child message:{{message}}<br/>\ <input type='text' ng-model='message'/></div>" } }); app.directive("myDirect2", function () { return { restrict: "A", replace: true, scope: { message: "@", }, template: "<div ng-init=\"message='child infor'\">\ child message:{{message}}<br/>\ <input type='text' ng-model='message'/></div>" } }); app.directive("myDirect3", function () { return { restrict: "A", replace: true, scope: { message: "=", }, template: "<div ng-init=\"message='child infor'\">\ child message:{{message}}<br/>\ <input type='text' ng-model='message'/></div>" } }); app.directive("myDirect4", function () { return { restrict: "A", replace: true, scope: { getDate: "&", }, template: "<div ng-init=\"message='child infor'\">\ child message:{{message}}<br/>\ <input type='text' ng-model='message'/>\ <input type='button' value='獲取系統時間'\ ng-click='getDate()'/></div>" } }); </script>
好了，時間不早了，周五早點休息
通過最近學習，感覺進度很慢，後續加快學習步驟
明天繼續學習指令的其他屬性
