问题描述
未读消息提醒
当器具用户或技术机构对非强检器具检校申请发布新的意见时，需要对对方进行消息通知。
后台很简单，本文主要解决前台遇到的问题。
历史遗留
这是我的消息遗留下来的统计未读消息的指令，用到了缓存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毫无关系，我们怎么办呢？
事件发布
查阅了相关资料，AngularJS中Scope可以发布事件。
$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();
}
};
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。