AngularJS 事件发布机制


Posted in Javascript onAugust 28, 2018

问题描述

未读消息提醒

当器具用户或技术机构对非强检器具检校申请发布新的意见时,需要对对方进行消息通知。

后台很简单,本文主要解决前台遇到的问题。

AngularJS 事件发布机制

历史遗留

这是我的消息遗留下来的统计未读消息的指令,用到了缓存superCache

一眼看去应该能发现这个if...else的问题,第一次请求,将数据放到缓存里,之后就一直从缓存中取了,这肯定有问题啊!原来有1条消息,然后点击查看,然后这个指令仍然是从缓存中取的数据,还显示一条。

angular.module('webappApp')
  .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
    return {
      template: '',
      restrict: 'E', // 元素
      link: function postLink(scope, element) {
        // 判断缓存中是否存在未读消息数量
        if (typeof superCache.get('unReadMessageCount') === 'undefined') {
          // 获取当前用户的所有未读收件消息
          ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) {
            // 存入缓存
            superCache.put('unReadMessageCount', data.totalElements);
            // 显示文本信息
            element.text(superCache.get('unReadMessageCount'));
          });
        } else {
          // 显示文本信息
          element.text(superCache.get('unReadMessageCount'));
        }
      }
    };
  });

功能实现

注销时清除缓存

注销时如果不清除缓存,下一个用户登录时用的就是上一用户留下来的缓存,造成信息提示错误。

AngularJS 事件发布机制

阅读时重新执行指令

下图就是该实现的难点。

该用户有一条未读消息,当用户点击阅读这条消息时,将该消息的状态设置为已读,然后右上角的未读条数同时修改。但是点击这个事件是发生在控制器中,而消息又是一个额外的指令,两者毫无联系。

AngularJS 事件发布机制

AngularJS的精髓就是Scope,这是两个Scope,页面内容是我们的控制器Scope,右上角的消息处是我们的未读消息指令Scope

如若是简单的父子Scope关系,我们可以从控制器传参数到指令,指令watch这个参数,根据控制器对参数的变动让指令做出响应。但是这两个Scope毫无关系,我们怎么办呢?

AngularJS 事件发布机制

事件发布

查阅了相关资料,AngularJSScope可以发布事件。

$broadcast(name, args);

Dispatches an event name downwards to all child scopes (and their children) notifying the registered $rootScope.Scope listeners.

向下分发一个事件给他的所有子Scope,通知已注册的Scope

$emit(name, args);

Dispatches an event name upwards through the scope hierarchy notifying the registered $rootScope.Scope listeners.

$broadcast类似,只不过这个是用来向上发布事件的。

$on(name, listener);

Listens on events of a given type.

监听一个给定类型的事件。

实例说明angularjs $broadcast $emit $on的用法

<div ng-controller="ParentCtrl">         //父级 
  <div ng-controller="SelfCtrl">        //自己 
    <a ng-click="click()">click me</a> 
    <div ng-controller="ChildCtrl"></div>   //子级 
  </div> 
  <div ng-controller="BroCtrl"></div>      //平级 
</div>

js代码

appControllers.controller('SelfCtrl', function($scope) { 
  $scope.click = function () { 
    $scope.$broadcast('to-child', 'child'); 
    $scope.$emit('to-parent', 'parent'); 
  } 
}); 

appControllers.controller('ParentCtrl', function($scope) { 
  $scope.$on('to-parent', function(d,data) { 
    console.log(data);     //父级能得到值 
  }); 
  $scope.$on('to-child', function(d,data) { 
    console.log(data);     //子级得不到值 
  }); 
}); 

appControllers.controller('ChildCtrl', function($scope){ 
  $scope.$on('to-child', function(d,data) { 
    console.log(data);     //子级能得到值 
  }); 
  $scope.$on('to-parent', function(d,data) { 
    console.log(data);     //父级得不到值 
  }); 
}); 

appControllers.controller('BroCtrl', function($scope){ 
  $scope.$on('to-parent', function(d,data) { 
    console.log(data);    //平级得不到值 
  }); 
  $scope.$on('to-child', function(d,data) { 
    console.log(data);    //平级得不到值 
  }); 
});

点击Click me的输出结果

child 
parent 

代码实现

$rootScope

考虑到这两个控制器与指令之间Scope的关系,无论是向上还是向下可能都接收不到。

这里直接用$rootScope向下发布事件,保证所有Scope都能获取到该事件。免得去考虑当前Scope与目的Scope之间的关系。

// 广播发布reloadMessageCount事件,重新计算未读消息数量
$rootScope.$broadcast('reloadMessageCount');

因为考虑到各个层之间的职责关系,我认为:事件发布应该方法控制器中,而不应该放在Service中,Service就等着被别人调用,不应该与其他文件有耦合关系,否则改起来很难改。

$on

重构指令,使用$on监听事件发布,执行相应的逻辑重新显示右上角的未读消息数。

angular.module('webappApp')
  .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
    return {
      template: '<b ng-if="count">{{ count }}</b>',
      restrict: 'E', // 元素
      link: function postLink(scope) {
        var self = this;

        self.init = function() {
          self.computeMessageCount();
        };

        // 计算未读消息数量
        self.computeMessageCount = function() {
          // 判断缓存中是否存在未读消息数量
          if (angular.isUndefined(superCache.get('unReadMessageCount'))) {
            // 获取当前用户的所有未读收件消息
            ToMessageService.pageReceiveUnReadMessageOfCurrentUser(undefined, function(data) {
              // 存入缓存
              superCache.put('unReadMessageCount', data.totalElements);
              // 显示
              scope.count = superCache.get('unReadMessageCount');
            });
          } else {
            scope.count = superCache.get('unReadMessageCount');
          }
        };

        // 处理reloadMessageCount事件的处理逻辑
        scope.$on('reloadMessageCount', function() {
          // 清除缓存
          superCache.remove('unReadMessageCount');
          // 计算未读消息数量
          self.computeMessageCount();
        });

        // 初始化
        self.init();
      }
    };
  });

AngularJS 事件发布机制

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 学习笔记(六)浏览器类型及版本信息检测代码
Apr 08 Javascript
JS在IE下缺少标识符的错误
Jul 23 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
Jan 16 Javascript
webpack4的迁移的使用方法
May 25 Javascript
VUE DOM加载后执行自定义事件的方法
Sep 07 Javascript
JavaScript交换两个变量方法实例
Nov 25 Javascript
JavaScript Reflect Metadata实现详解
Dec 12 Javascript
js、jquery实现列表模糊搜索功能过程解析
Mar 27 jQuery
Javascript执行流程细节原理解析
May 14 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 #Javascript
深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域
Aug 28 #Javascript
对vue事件的延迟执行实例讲解
Aug 28 #Javascript
快速解决vue在ios端下点击响应延时的问题
Aug 27 #Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 #Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 #Javascript
Vue 实现展开折叠效果的示例代码
Aug 27 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
探讨php中遍历二维数组的几种方法详解
2013/06/08 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
javascript中apply和call方法的作用及区别说明
2014/02/14 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
AngularJs中route的使用方法和配置
2016/02/04 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery.cookie.js使用方法及相关参数解释
2017/03/06 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
浅谈通过JS拦截 pushState和replaceState事件
2017/07/21 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
nodejs读取并去重excel文件
2018/04/22 NodeJs
vue.js删除列表中的一行
2018/06/30 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
2020/02/06 Javascript
Python 读写文件的操作代码
2018/09/20 Python
Python 运行.py文件和交互式运行代码的区别详解
2019/07/02 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
利用CSS3实现进度条的两种姿势详解
2017/03/21 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
2016/04/15 HTML / CSS
phpquery中文手册
2021/03/18 PHP
请解释接口的显式实现有什么意义
2012/05/26 面试题
大学生专业个人学习的自我评价
2013/10/26 职场文书
满月酒主持词
2014/03/27 职场文书
二手房购房意向书范本
2014/04/01 职场文书
松材线虫病防治方案
2014/06/15 职场文书
村干部四风问题整改措施
2014/09/30 职场文书
教师党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
辞职信范文大全
2015/03/02 职场文书
2014年度个人总结范文
2015/03/09 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
德生BCL3000抢先使用感受和评价
2022/04/07 无线电
源码安装apache脚本部署过程详解
2022/09/23 Servers