您好，昨天学习了指令作用域为布尔型的情况，
今天主要研究其指针作用域为{}的情况
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>
好了，时间不早了，周五早点休息
通过最近学习，感觉进度很慢，后续加快学习步骤
明天继续学习指令的其他属性