AngularJs学习笔记--Scope
一、什么是Scope？scope[http://code.angularjs.org/1.0.2/docs/api/ng.
二、scope的特性scope提供
三、Scope as Data-Model（scope作为数据模型） scope是在应用controller与view之间的纽带。在模版linking[http://www.cnblogs.com/lcllao/archive/2012/09/04/2669802.html]的阶段，directive[http://www.cnblogs.com/lcllao/archive/2012/09/09/2677190.html]在scope中设置
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app> <head> <meta charset="UTF-8"> <title>data-model</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body class="ng-cloak"> <div ng-controller="MyController"> 你的名字： <input type="text" ng-model="username"/> <button ng-click="sayHello()">欢迎</button> <hr/> {{greeting}} </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MyController($scope) { $scope.username = "My Little Dada"; $scope.sayHello = function() { $scope.greeting = "Hello~" + $scope.username + "!"; }; } </script> </body> </html>
在上面的例子中我们可以注意到MyController以”My Little Dada”对scope中的username属性进行赋值。然后，scope通知input进行赋值，将username的值预先填入input中。这展示了controller如何做才能够写入数据到scope中。 相似地，controller可以将行为附加在scope中，正如那个当用户点击“欢迎”按钮时触发的sayHello方法一样。sayHello方法可以读取username属性，也可以创建greeting属性。这表明，当它们绑定到HTML input控件时，scope中的属性会自动更新。 从可测试性来看，controller和view的分离是值得欣喜的，因为它允许我们在没有渲染细节的干扰下（专注于）测试行为。 it('should say hello',function() {
var scopeMock = {};
var cntl = new MyController(scopeMock);
// Assert that username is pre-filled
expect(scopeMock.username).toEqual('World');
// Assert that we read new username and greet
scopeMock.username = 'angular';
scopeMock.sayHello();
expect(scopeMock.greeting).toEqual('Hello angular!');
});
四、Scope Hierarchies（scope层次结构） 每一个angular应用有且只有一个root scope，但可以拥有多个child scope。 <!DOCTYPE HTML>
<html lang="zh-cn" ng-app> <head> <meta charset="UTF-8"> <title>scope-hierarchies</title> <style type="text/css"> .ng-cloak { display: none; } .ng-scope { border: 1px dashed red; } </style> </head> <body class="ng-cloak"> <div ng-controller="MyController"> 经理：{{employee.name}} [{{department}}] <br/> 报告： <ul> <li ng-repeat="employee in employee.reports"> {{employee.name}} [{{department}}] </li> </ul> <hr/> {{greeting}} </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MyController($scope) { $scope.department = "某部"; $scope.employee = { name:"My Little Dada",reports: [ {name:"Lcllao"},{name:"那个谁^o^"} ] }; } </script> </body> </html> 注意，angular自动放置ng-scope class到与scope粘附的元素中。
五、Retrieving Scopes from the DOM（从DOM中检索scope）scope作为$scope数据属性附加到DOM中，可以被用于以调试作为目的的检索。（在应用中通过这个方式检索Scope是不可能的。）附加到的DOM的root scope的位置是通过ng-app directive的位置定义的。通常ng-app是放置在元素中，但它也可以放置在其他元素中，例如，只有一部分视图需要被angular控制。 在debugger中查看scope：
六、Scope Events Propagation（Scope事件传播）scope可以以类似于DOM事件的方式进行事件传播。事件可以被broadcast（http://code.angularjs.org/1.0.2/docs/api/ng.rootScope.Scope#broadcast）到child scope或者emit（http://code.angularjs.org/1.0.2/docs/api/ng.rootScope.Scope#emit）到parent scope中。（当前scope如果有监听，也会执行） <!DOCTYPE HTML>
<html lang="zh-cn" ng-app> <head> <meta charset="UTF-8"> <title>scope-event-propagation</title> <style type="text/css"> .ng-cloak { display: none; } </style> </head> <body class="ng-cloak"> <div ng-controller="MyController"> root scope count:{{count}} <ul> <li ng-repeat="i in [1]" ng-controller="MyController"> <button ng-click="$emit('MyEvent')">$emit("MyEvent")</button> <button ng-click="$broadcast('MyEvent')">$broadcast("MyEvent")</button> <br/> middle scope count:{{count}} <ul> <li ng-repeat="item in [1,2]" ng-controller="MyController"> Leaf scope count:{{count}} </li> </ul> </li> </ul> </div> <script src="../angular-1.0.1.js" type="text/javascript"></script> <script type="text/javascript"> function MyController($scope) { $scope.count = 0; $scope.$on("MyEvent",function() { $scope.count++; }); } </script> </body> </html>
七、Scope Life Cycle（scope生命周期）浏览器正常的事件流中，当浏览器接收到事件后，它会执行一个相应的javascript回调。一旦回调函数执行完毕后，浏览器将会重绘DOM，并返回到继续等待事件的状态。 当浏览器在angular执行环境外调用javascript代码时，这意味着angular是不知道model的改变的。要正确处理model的修改，这个命令必须通过使
在对表达式求值之后，
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |