AngularJS 이벤트 게시에 대해 얼마나 알고 계십니까? 이제 이 기사에서는 Anglejs 이벤트 세부 사항에 대해 알고 싶은 내용을 설명합니다.

이 글에서는 angularjs 이벤트 출시에 대한 자세한 내용을 주로 소개합니다. 그럼 서둘러 살펴보시고 지금 이 글을 함께 읽어보시죠

읽지 않은 메시지 알림:

기기 사용자 또는 기술 기관이 비의무 검사 기기 교정 신청에 대해 새로운 의견을 제시하는 경우 필요합니다. 상대방에게 메시지를 알립니다. 백엔드는 매우 간단합니다. 이 기사에서는 주로 프론트엔드에서 발생하는 문제를 해결합니다.

역사적 유산

내 메시지에 남아있는 읽지 않은 메시지의 수를 superCache 캐싱을 사용하여 셉니다. 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'));
                }
            }
        };
    });

功能实现

注销时清除缓存

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

阅读时重新执行指令

下图就是该实现的难点。

该用户有一条未读消息，当用户点击阅读这条消息时，将该消息的状态设置为已读，然后右上角的未读条数同时修改。但是点击这个事件是发生在控制器中，而消息又是一个额外的指令，两者毫无联系。(想学更多就到PHP中文网angularjs参考手册栏目中学习)

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.

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

代码实现

$rootScope

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

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

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

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

$on

重构指令，使用$on

이 if...else 문제를 한눈에 찾을 수 있을 것입니다. 첫 번째 요청은 데이터를 캐시에 넣은 다음 캐시에서 계속 가져오는 것입니다. 틀렸어! 1 메시지가 있는 것으로 나타났으며 이를 보려면 클릭합니다. 그런 다음 이 명령은 여전히 ​​캐시에서 데이터를 가져오고 하나의 메시지가 표시됩니다.

angular.module('webappApp')
    .directive('yunzhiUnReadMessageCount', function(ToMessageService, superCache) {
        return {
            template: '<b>{{ 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();
            }
        };
    });

기능 구현로그아웃 시 캐시 지우기

로그아웃 시 캐시가 지워지지 않으면 다음 사용자가 로그인 시 이전 사용자가 남긴 캐시를 사용하게 되어 오류 메시지가 발생합니다.

읽으면서 명령어를 다시 실행해 보세요

아래 그림은 이 구현의 어려움을 보여줍니다.
사용자가 읽지 않은 메시지가 있습니다. 사용자가 메시지를 읽기 위해 클릭하면 메시지 상태가 읽음으로 설정되고 동시에 오른쪽 상단에 읽지 않은 메시지 수가 수정됩니다. 하지만 컨트롤러에서 클릭 이벤트가 발생하고 메시지는 추가 명령일 뿐 둘 사이에는 연결이 없습니다. (자세한 내용을 알고 싶으시면 PHP 중국어 홈페이지

angularjs 참조 매뉴얼

칼럼을 참고하세요)

🎜🎜🎜🎜AngularJS의 핵심은 Scope입니다. code>Scope, 페이지 콘텐츠는 컨트롤러 Scope이고 오른쪽 상단에 있는 메시지는 읽지 않은 메시지 명령 Scope입니다. 🎜🎜간단한 상위-하위 Scope 관계인 경우 컨트롤러에서 명령으로 매개변수를 전달할 수 있습니다. watch 명령의 매개변수는 다음에 따라 만들어집니다. 컨트롤러에 의해 매개변수 응답이 변경되었습니다. 그런데 이 두 Scope는 서로 관련이 없습니다. 어떻게 해야 할까요? 🎜🎜🎜🎜 🎜🎜이벤트 게시🎜🎜관련 정보를 확인한 후 AngularJS의 Scope에서 이벤트를 게시할 수 있습니다. 🎜

$broadcast(name, args);

rrreee🎜는 모든 하위 Scope에 이벤트를 배포하여 등록된 Scope에 알립니다. 🎜

$emit(name, args);

rrreee🎜이벤트를 위쪽으로 게시하는 데 사용된다는 점을 제외하면 $broadcast와 유사합니다. 🎜

$on(이름, 청취자);

rrreee🎜특정 유형의 이벤트를 수신합니다. 🎜🎜코드 구현🎜

$rootScope

🎜이 두 컨트롤러와 명령어 간의 Scope 관계를 고려하면 상향 또는 하향이 수신되지 않을 수 있습니다. 🎜🎜여기서 모든 Scope가 이벤트를 얻을 수 있도록 $rootScope를 사용하여 이벤트를 직접 게시하세요. 현재 범위와 대상 범위 사이의 관계를 고려할 필요가 없습니다. 🎜rrreee🎜각 레이어 간의 책임 때문에 이벤트 게시는 메서드 컨트롤러에 있어야 하고 Service, Service 등에 배치하면 안 된다고 생각합니다. 다른 사람이 호출한 경우 다른 파일과 결합해서는 안 됩니다. 그렇지 않으면 변경하기가 어렵습니다. 🎜

$on

🎜명령을 리팩터링하고, $on을 사용하여 이벤트 게시를 수신하고, 해당 로직을 실행하여 오른쪽 상단에 읽지 않은 메시지 수를 다시 표시합니다. 🎜rrreee🎜🎜위 내용은 이 글의 전체 내용입니다. 더 자세히 알고 싶으시면 PHP 중국어 웹사이트의 🎜angularjs 학습 매뉴얼🎜 칼럼으로 가서angularjs에 대해 자세히 알아보세요. 질문이 있으시면 아래에 메시지를 남겨주세요. 🎜🎜【에디터 추천】🎜🎜🎜angularjs 필터 사용법을 아시나요? Anglejs 필터에 대한 자세한 설명을 살펴보겠습니다🎜🎜🎜🎜🎜Angularjs에서 표현식을 사용하는 방법은 무엇인가요? Anglejs🎜🎜🎜🎜🎜🎜 표현식의 사용 예

위 내용은 AngularJS 이벤트 게시에 대해 얼마나 알고 계십니까? 이제 이 기사에서는 Anglejs 이벤트 세부 사항에 대해 알고 싶은 내용을 설명합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!