当前位置: 首页 > news >正文

(AngularJS)Angular 控制器之间通信初探

最近做Angular 项目,经常遇到的一个问题是控制器之间的通信问题。这篇文章打算总结一下这部分的使用经验,有借鉴别人的部分,也有自己的总结,我会尽量说的明白些~如果我的理解有纰漏,请帮忙之处,谢谢。

问题背景

我最开始写功能的时候,只是定义了一个 mainController,就只有这一个控制器。由于是一个单页面应用,所以也比较ok,各种功能的实现也没啥大的问题。但是随着代码的深入,我老是觉得把所有东西都写到$scope上面很不妥,这会导致 $scope 越来越臃肿,而且命名也是个问题,万一不小心名字重复覆盖了呢?接下来说下我用到的解决方案。。。

第一种解决方案

很简单,就是我在$scope下面创建了几个不同的对象,比如$scope.data 就用来存放用到的公共数据,$scope.global 就是使用的一些公共方法。这样倒是可行,但他们两个对象后面也会变得比较臃肿,感觉这并不是什么可靠的方式。

第二种

这个时候问了下我们组长,他的建议是mainController下面,再让我自己去分几个controller。这倒是提醒了我,于是我重新组织了页面,划分了各个不同的模块,每一个模块对应一个controller。比如购买页面主体部分有promoteController 和 payController,侧边栏是sidebarController等等。每个controller 就负责自己那部分的页面渲染和事件绑定。

这样分割模块下来感觉整体清晰了很多,不再想之前咋样各个部分的代码逻辑都杂糅在一起。这就是模块化编程的一种优势吧。

综上,我最终选择了分模块,设置控制器这样一种方式,然后他们上层有一个主模块,整体控制的方式。这样就出现本文涉及的主要问题,控制器之间如何通信。。。。

问题的出现

项目中这样一个小功能,点开一个小三角,弹出提示信息框,再点,就关闭这个提示框!相信前端朋友们很多都做过这个小效果,很简单。但是还有功能,就是除了这个小三角之外的地方,如果触发了点击事件,而且提示框在显示的话,要关闭这个提示框。再说下我的解决方案。。。

控制器继承方式

我把小弹窗的处理函数比如 A(),定义到 mainController,然后如果小三角点击事件触发,则在相应的子控制器中,出发A()。因为子控制器是可以继承得到mainController的方法,
所以可以子控制可以直接调用。

但是这种方式给我感觉有些混乱,最主要的还是,这应该是子控制器自己的方法,不应该上升到 mainController。

基于事件的方式

Angular 中提供了$on,$broadcast,$emit 这几种方式,我当时也是主要参考了后面列出的几篇文章。一使用还是很容易就实现了。

通过这种方式,我把提示框显示留在了子控制器。具体实现代码类似:

mainController 直接调用
$broadcast( 'closeTip' );
子控制器接收
$on( 'closeTip', function( $event ) {
  $scope.hideTip = false;
  $event.stopPropagation(); // 停止冒泡
} );

这样当全局接收到点击事件的时候,就是把关闭这个提示框的信号广播出去。那么相应模块的子控制器接收到了之后,就会调用自己的方法关闭提示框。那么这里还用到了 $event.stopPropagation(); 就终止了事件继续冒泡,不让点击事件再次传递。。。( 这部分停止冒泡是为了处理单纯小三角的点击事件,因为它的点击会传递到mainController,而mainController上面默认的点击事件是关闭提示框。所以不能让这部分传递过去 )

总结

我这部分处理主要参考的就是参考资料1 && 3,我这里对1的学习做个总结。首先感谢这篇分享,学到了很多,还有实例代码!主要用了文章中前两种实现方式。

1 继承的通信方式

单独一个基本属性,如定义一个变量,子级控制器能够从父级继承得到,而且父级修改会影响子级,但子级修改并不影响父级,而且子级如果有属性和父级同名,那么子级默认使用自己的变量。这和js 的作用域一样。如果要父级和子级控制器共享一个值,既父级子级修改都能相互影响,这就需要定义一个对象。因为对象是引用类型。。。

2 基于事件$broadcast $emit 看参考资料2,使用 $broadcast 貌似有性能问题,不知现在的Angular版本是否解决。。。。感觉广播的方式确实会很降低效率,还是 $emit 好!

3 服务的方式,我虽然没用这种方式实现,但感觉这种更倾向于模块化,比上面的实现思路更加清晰。。。而且更加通用

这是目前关于控制器通信的一些认识。实现控制器通信方式这些文章介绍的很详细,大家可以参考下!欢迎指正我文章的错误~~

参考资料

  1. 控制器之间的通信

  2. AngularJS控制器controller正确的通信的方法

  3. AngularJs 在线教程 $on、$emit和$broadcast的使用

转载于:https://www.cnblogs.com/StrongerSY/p/5377189.html

相关文章:

  • 使用Spring AOP实现MySQL数据库读写分离案例分析
  • SlidingMenu实现 app侧滑功能
  • 数据库分库分表策略的具体实现方案
  • 98%的人没解出的德国面试逻辑题(离散数学篇)!?
  • 如何为你的CSDN博客加入百度统计
  • 【iOS自定义键盘及键盘切换】详解
  • Spring MVC中带有继承关系或者含有对象的参数请求处理方式
  • Tomcat部署时war和war exploded区别以及平时踩得坑
  • nodejs帮助学习地址
  • Linux操作系统安装ELK stack日志管理系统--(1)Logstash和Filebeat的安装与使用
  • 【笔记】js高级程序设计:函数(变量)声明提升
  • Linux操作系统安装ELK stack日志管理系统--(2)Elasticsearch与Kibana的安装与使用以及和Logstash的连接
  • IOS异步获取数据并刷新界面dispatch_async的使用方法
  • Redis实战和核心原理详解(6)使用Spring Session和Redis解决分布式Session跨域共享问题
  • Redis实战和核心原理详解(7)Spring Session解决分布式Session问题的实现原理
  • [LeetCode] Wiggle Sort
  • 【笔记】你不知道的JS读书笔记——Promise
  • canvas 五子棋游戏
  • Cumulo 的 ClojureScript 模块已经成型
  • hadoop入门学习教程--DKHadoop完整安装步骤
  • HTML5新特性总结
  • IP路由与转发
  • Java读取Properties文件的六种方法
  • js如何打印object对象
  • k8s如何管理Pod
  • nginx(二):进阶配置介绍--rewrite用法,压缩,https虚拟主机等
  • Objective-C 中关联引用的概念
  • spring boot下thymeleaf全局静态变量配置
  • vue和cordova项目整合打包,并实现vue调用android的相机的demo
  • 基于 Babel 的 npm 包最小化设置
  • 前端技术周刊 2019-01-14:客户端存储
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 删除表内多余的重复数据
  • 我看到的前端
  • 源码安装memcached和php memcache扩展
  • 白色的风信子
  • 7行Python代码的人脸识别
  • ​ 全球云科技基础设施:亚马逊云科技的海外服务器网络如何演进
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • ​TypeScript都不会用,也敢说会前端?
  • $jQuery 重写Alert样式方法
  • (8)STL算法之替换
  • (Matlab)使用竞争神经网络实现数据聚类
  • (Redis使用系列) Springboot 使用Redis+Session实现Session共享 ,简单的单点登录 五
  • (笔试题)合法字符串
  • (附源码)计算机毕业设计SSM基于健身房管理系统
  • (汇总)os模块以及shutil模块对文件的操作
  • (三分钟)速览传统边缘检测算子
  • (十六)一篇文章学会Java的常用API
  • (一)C语言之入门:使用Visual Studio Community 2022运行hello world
  • (转)Android中使用ormlite实现持久化(一)--HelloOrmLite
  • .NET HttpWebRequest、WebClient、HttpClient
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .NET 的程序集加载上下文
  • .NET 使用 JustAssembly 比较两个不同版本程序集的 API 变化