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的精髓就是Scope,这是两个Scope,页面内容是我们的控制器Scope,右上角的消息处是我们的未读消息指令Scope

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

事件发布

查阅了相关资料,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();
      }
    };
  });

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

(0)

相关推荐

  • Angular的事件和表单详解

    前面的文章说道了click事件,与其类似的mouseover以及mousemove等等.下面看看selected.change.copy等运用在表单的事件吧. selected <div ng-controller="Aaa"> <input type="checkbox" ng-model="aaa" value="{{aaa}}"> <select> <option>1111

  • AngularJS ionic手势事件的使用总结

    这两天学习了AngularJS手势事件感觉这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 长按 : on-hold 在屏幕同一位置按住超过500ms,将触发on-hold事件: 你可以在任何元素上使用这个指令挂接监听函数: <any on-hold="-">-</any> 示例代码: <body ng-controller="ezCtrl"> <ion-header-bar class="bar-po

  • Angularjs的键盘事件的绑定

    Angularjs的键盘事件的绑定 推荐button 方法一:ng内置指令 <button ng-click="login()" ng-keypress="todoSomething($event)" class="btn btn-success btn-lg" ng-disabled="loginForm.$invalid"> 登录 </button> 说明:在对应的控制器中的$scope上绑定一个t

  • Angularjs中使用指令绑定点击事件的方法

    项目中,模板中的菜单是jQuery控制的,在Angularjs中就运行不到了,因为菜单项是ng-repeat之后的. 如html <ul id="main-menu"> <li class=""> <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external n

  • Angularjs 事件指令详细整理

    Angularjs 事件指令详细整理 ngClick 适用标签:所有 触发条件:单击 #html <div ng-controller="LearnCtrl"> <div ng-click="click()">click me</div> <button ng-click="click()">click me</button> </div> #script angular.m

  • AngularJS对动态增加的DOM实现ng-keyup事件示例

    我们经常在网页中看到这种形式的内容,如图: 用鼠标点击一下,就变成了一个input,如图: 如果未输入内容,并且鼠标离开后,则变回了原来的样子:如果输入了内容,即使鼠标离开,也保持内容不变,此时输入回车,则添加内容,并清空输入框. 我在想这个是这么实现的?想了一下有这么一个思路:普通情况下这个是一个div或p元素,点击之后变成一个input元素,鼠标离开则变回原元素.代码(含详细注释版)如下: window.onload = function () { // 页面加载完给id为click-to-

  • Angular使用操作事件指令ng-click传多个参数示例

    本文实例讲述了Angular使用操作事件指令ng-click传多个参数功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <title>www.jb51.net angular ng-click用于操作事件的指令</title> <script src="a

  • Angularjs为ng-click事件传递参数

    在angularjs开发中,我们需要为ng-click事件传递一个参数. 在js中,可以接到参数: 演示:

  • AngularJS 事件发布机制

    问题描述 未读消息提醒 当器具用户或技术机构对非强检器具检校申请发布新的意见时,需要对对方进行消息通知. 后台很简单,本文主要解决前台遇到的问题. 历史遗留 这是我的消息遗留下来的统计未读消息的指令,用到了缓存superCache. 一眼看去应该能发现这个if...else的问题,第一次请求,将数据放到缓存里,之后就一直从缓存中取了,这肯定有问题啊!原来有1条消息,然后点击查看,然后这个指令仍然是从缓存中取的数据,还显示一条. angular.module('webappApp') .direc

  • 解析Spring事件发布与监听机制

    前言 Spring 提供了 ApplicationContext 事件机制,可以发布和监听事件,这个特性非常有用. Spring 内置了一些事件和监听器,例如在 Spring 容器启动前,Spring 容器启动后,应用启动失败后等事件发生后,监听在这些事件上的监听器会做出相应的响应处理. 当然,我们也可以自定义监听器,监听 Spring 原有的事件.或者自定义我们自己的事件和监听器,在必要的时间点发布事件,然后监听器监听到事件就做出响应处理. ApplicationContext 事件机制 Ap

  • 详解Spring事件发布与监听机制

    目录 一.ApplicationContext 事件机制 二.ApplicationListener 监听器 三.ApplicationEvent 事件 四.自定义事件和监听器 五.注解式监听器 一.ApplicationContext 事件机制 ApplicationContext 事件机制采用观察者设计模式来实现,通过 ApplicationEvent 事件类和 ApplicationListener 监听器接口,可以实现 ApplicationContext 事件发布与处理. 每当 App

  • Spring事件发布监听,顺序监听,异步监听方式

    目录 1. Spring的事件通知 2. Spring事件通知使用 2.1 Spring的事件 2.2 事件监听 2.2.1 接口方式实现 2.2.2 注解实现 2.3 事件发布 2.4 Spring顺序监听器 2.5 异步监听 3. 总结 最近在做公司的业务需要用到事件通知,比如启动成功打印日志,通知其他业务做相应的操作,就用到了Spring的事件通知机制. 1. Spring的事件通知 Spring的事件通知本质上就是发布-订阅,即生产者-消费者:体现了观察者设计模式或者回调通知,那么Spr

  • jQuery新的事件绑定机制on()示例应用

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • 关于jQuery新的事件绑定机制on()的使用技巧

    今天浏览jQuery的deprecated列表,发现live()和die()在里面了,赶紧看了一下,发现从jQuery1.7开始,jQuery引入了全新的事件绑定机制,on()和off()两个函数统一处理事件绑定.因为在此之前有bind(), live(), delegate()等方法来处理事件绑定,jQuery从性能优化以及方式统一方面考虑决定推出新的函数来统一事件绑定方法并且替换掉以前的方法. on(events,[selector],[data],fn) events:一个或多个用空格分隔

  • Android View 事件分发机制详解

    Android开发,触控无处不在.对于一些 不咋看源码的同学来说,多少对这块都会有一些疑惑.View事件的分发机制,不仅在做业务需求中会碰到这些问题,在一些面试笔试题中也常有人问,可谓是老生常谈了.我以前也看过很多人写的这方面的文章,不是说的太啰嗦就是太模糊,还有一些在细节上写的也有争议,故再次重新整理一下这块内容,十分钟让你搞明白View事件的分发机制. 说白了这些触控的事件分发机制就是弄清楚三个方法,dispatchTouchEvent(),OnInterceptTouchEvent(),o

  • 30分钟搞清楚Android Touch事件分发机制

    Touch事件分发中只有两个主角:ViewGroup和View.Activity的Touch事件事实上是调用它内部的ViewGroup的Touch事件,可以直接当成ViewGroup处理. View在ViewGroup内,ViewGroup也可以在其他ViewGroup内,这时候把内部的ViewGroup当成View来分析. ViewGroup的相关事件有三个:onInterceptTouchEvent.dispatchTouchEvent.onTouchEvent.View的相关事件只有两个:

  • Android View事件分发机制详解

    准备了一阵子,一直想写一篇事件分发的文章总结一下,这个知识点实在是太重要了. 一个应用的布局是丰富的,有TextView,ImageView,Button等,这些子View的外层还有ViewGroup,如RelativeLayout,LinearLayout.作为一个开发者,我们会思考,当点击一个按钮,Android系统是怎样确定我点的就是按钮而不是TextView的?然后还正确的响应了按钮的点击事件.内部经过了一系列什么过程呢? 先铺垫一些知识能更加清晰的理解事件分发机制: 1. 通过setC

随机推荐