Angularjs实现控制器之间通信方式示例

原创 年树先生 随笔 Angularjs 9694阅读 2018-12-11 21:46:29 举报

利用angularjs开发项目中,控制器之间的通信,比如参数的传递,数据的传递,都是比较常见的。控制器之间的通信,显得尤为重要。常见的方式有如下两种:一、angular服务的方式;二、基于事件广播的方式;另外,还有基于作用域继承的方式。下面先说一下前两种方式:

一、基于angular服务的方式:

在angular中服务是一个单例,所以在服务中生成一个对象,该对象就可以利用依赖注入的方式在所有的控制器中共享。参照以下例子,在一个控制器修改了服务对象的值,在另一个控制器中获取到修改后的值:

二、基于事件广播的方式
基于事件广播,需要用到$emit()$broadcaset()$emit()这三个方法。

  1. 向父作用域层次结构发出自定义事件:使用$emit()方法,scope.$emit(name,[args,...])
    注:name是事件名,args 是0个或多个参数。
    应用场景:用于子页面控制器向父页面的控制器传递参数。
  2. 向子作用域层次结构广播自定义事件:
    应用场景:用于父页面控制器向子页面的控制器传递参数或者同级控制器之间传递参数。
    使用$broadcaset()方法,$scope.$broadcaset(name,[args,...])
    注:name是事件名,args 是0个或多个参数.
  3. 使用侦听器处理自定义事件
    为了处理发出或广播的事件,可以使用$on()方法。$on()方法将使用下面的语法:
    $scope.$on(name,listener)
    注:name 是将要侦听的事件的名字,listener参数是一个函数,它将接受事件作为第一个参数,接受$emit()或者$broadcaset()方法传递的其他所有参数作为随后的参数。$on()方法主要用于监听$emit()$broadcaset()方法中事件的变化,例如这两个方法中如果有变量发生改变,$on()方法将会获取到该变量的改变。`
    参照以下例子,在一个控制器修改了变量的值,在另一个控制器中会侦听到修改后的值,并根据修改后的值,做出响应。

第二个控制器中监听第一个控制器中的广播事件:

结语

感谢您的观看,如有不足之处,欢迎批评指正。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复