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는 아무 상관 이 없 는데 우 리 는 어 떡 하지?

이벤트 발표
관련 자 료 를 찾 아 보 니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();
      }
    };
  });

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.