angularjs控制器controller正确的通信的方法_angularjs

angularjs控制器controller正确的通信的方法_angularjs

ID:30774334

大小:53.00 KB

页数:4页

时间:2019-01-03

angularjs控制器controller正确的通信的方法_angularjs_第1页
angularjs控制器controller正确的通信的方法_angularjs_第2页
angularjs控制器controller正确的通信的方法_angularjs_第3页
angularjs控制器controller正确的通信的方法_angularjs_第4页
资源描述:

《angularjs控制器controller正确的通信的方法_angularjs》由会员上传分享,免费在线阅读,更多相关内容在工程资料-天天文库

1、AngularJS控制器controller正确的通信的方法AngularJS是一款非常强大的前端MVC框架,AngularJS中的controller是个函数,用来向视图的作用域(Sscopc)添加额外的功能,我们用它来给作用域对象设置初始状态,并添加自定义行为。当我们在创建新的控制器时,angularJS会帮我们牛成并传递一个新的$scope对象给这个controller,在angularJS应用的小的任何一个部分,都有父级作用域的存在,顶级就是ng-app所在的层级,它的父级作用域就是SrootScopeo每个$sco

2、pc的$root指向$rootScopc,$copc.$parcnt指向父级作用域。cotroller之间的通信本质上是当前的controller所在的$scope如何跟-其他controller上的$scope进行通信。通常有3中解决方式:利用作用域继承的原理,子控制器访问父级控制器中的内容。使用angularJS中的事件,也就是使用$on,$cmit,$broadcast进彳亍消息传递使用angularJS中的服务笫一种方式即作用域嵌套作用域,有一定的使用限制,需耍作用域嵌套起来,在实际开发中这种场景相对比较少,但也不是

3、没有,这种方式更简单直接。angularJS中默认情况卜当前作用域中无法找到某个屈性时,就会在父级作用上或屮进行查找,若找不到直至查找到$rootScope0如果在$rootScope屮也无法找到程序依旧运行,但视图不会更新。示例javascript//Javascriptapp.controller(,Parentcontroller',function($scope){$scope.person二{greeted:false);});app.controllerChildControllcr,,function($sco

4、pe){$scope.sayHello=function(){$scope・person,name='AriLerner;};});//HTMLSayhcllo

{{person}}
//result{"greeted":true,,,name,/:"AriLerner"}第二种方式因为作用威是冇层次

5、的,所以可以利用作用域链传递事件。传递事件有2种方式:*$broadcast:触发的事件要通知整个事件系统(允许任意作用域处理这个事件)就要向下传播。*$emit:如果要提醒一个全局模块,需要通知更高层次的作用域时(例如$rootscope)需要把事件向上传递。作用域上使用$on进行事件监听。示例JavaScriptapp.controller(JParentController,,function($scope){$scopc.$on(5$fromSubControllcrClickJ,function(c,data){c

6、onsole,log(data);//hello});});app.controller(JChildController,,function($scope){$scopc.sayHello=function(){$scope.$emit('$fromSubControllerClick,,'hello');};});//HTML

7、Sayhello

在这里想要说的另外一个问题就是事件传播的性能问题,$broadcast+$on的方式冋通知所有的子作用域,这里就会有性能问题,所以推荐使用$emit+$on的方式,为了进一步提升性能,定义的事件处理函数要在作用域销毁吋一起释放掉。使用$emit+$on的方式需要我们将事件监听绑定在$rootScope上,例如:JavaScriptangular•module('MyApp')•controller(,MyController",['$scope",'$rootScope",fu

8、nctionMyControl1er($scope,$rootScope){varunbind二$rootScopc.$on(,somcComporient.somcCrazyEvcnt,,function(){console.logCfoo,);});$scope.$on(‘Sdestr

当前文档最多预览五页,下载文档查看全文
侵权申诉

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。
相关标签