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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
js脚本获取webform服务器控件的方法
May 16 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
微信小程序 聊天室简单实现
Apr 19 Javascript
微信小程序 flex实现导航实例详解
Apr 26 Javascript
JavaScript中常见内置函数用法示例
May 14 Javascript
微信小程序自定义prompt组件步骤详解
Jun 12 Javascript
Vue作用域插槽slot-scope实例代码
Sep 05 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
layui的layedit富文本赋值方法
Sep 18 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
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
利用curl抓取远程页面内容的示例代码
2013/07/23 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
关于JavaScript的gzip静态压缩方法
2007/01/05 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
jquery异步请求实例代码
2011/06/21 Javascript
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
在JavaScript中构建ArrayList示例代码
2014/09/17 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
获取select的value、text值的简单示例(jquery与javascript)
2016/12/07 Javascript
微信小程序左滑删除效果的实现代码
2017/02/20 Javascript
Node.js常用工具之util模块
2017/03/09 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
浅谈MUI框架中加载外部网页或服务器数据的方法
2018/01/31 Javascript
Nodejs模块的调用操作实例分析
2018/12/25 NodeJs
vue中使用router全局守卫实现页面拦截的示例
2020/10/23 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
nodejs+express最简易的连接数据库的方法
2020/12/23 NodeJs
python绘制条形图方法代码详解
2017/12/19 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
Python包,__init__.py功能与用法分析
2020/01/07 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
关于 HTML5 的七个传说小结
2012/04/12 HTML / CSS
阿迪达斯加拿大官网:Adidas加拿大
2016/08/25 全球购物
意大利值得信赖的在线超级药房:PillolaStore
2020/02/05 全球购物
介绍下java.util.Arrays类
2012/10/16 面试题
部队学习十八大感言
2014/01/11 职场文书
自动一体化专业求职信
2014/03/15 职场文书
公司合作意向书
2014/04/01 职场文书
学生安全责任书
2014/04/15 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
作文之亲情600字
2019/09/23 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python