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 相关文章推荐
基于jquery的表格排序
Sep 11 Javascript
关于二级域名下使用一级域名下的COOKIE的问题
Nov 07 Javascript
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
Array 重排序方法和操作方法的简单实例
Jan 24 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
Mar 23 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
详解tween.js的使用教程
Sep 14 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
Sep 28 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
我所理解的JavaScript中的this指向
Sep 04 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中this,self,parent的区别详解
2013/06/08 PHP
PHP 正则表达式常用函数
2014/08/17 PHP
php中stdClass的用法分析
2015/02/27 PHP
Laravel 5框架学习之Eloquent 关系
2015/04/09 PHP
PHP查询并删除数据库多列重复数据的方法(利用数组函数实现)
2016/02/23 PHP
laravel高级的Join语法详解以及使用Join多个条件
2019/10/16 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
验证码按回车不变解决方法
2013/03/29 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
在vue 中使用 less的教程详解
2018/09/26 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
Layui选项卡制作历史浏览记录的方法
2019/09/28 Javascript
vue3.0生命周期的示例代码
2020/09/24 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
python3使用腾讯企业邮箱发送邮件的实例
2019/06/28 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
美国蔬菜和植物种子公司:Burpee
2017/02/01 全球购物
英国网上购买肉类网站:Great British Meat
2018/10/17 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
儿科护士实习自我鉴定
2013/10/17 职场文书
电视购物广告词
2014/03/19 职场文书
优秀少先队大队辅导员事迹材料
2014/05/04 职场文书
预备党员综合考察材料
2014/05/31 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
防暑降温通知书
2015/04/27 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
SQL 聚合、分组和排序
2021/11/11 MySQL