AngularJs 서비스에서 사용자 지정 이벤트를 생성하는 방법

AngularJs 서비스에서 사용자 지정 이벤트를 생성하는 방법

저는 AngularJs 프로젝트를 진행하고 있습니다.일부 버튼의 이벤트를 설정 및 삭제하는 서비스를 제공하고 있습니다.이 서비스는 버튼과 직접 대화하고 싶지 않은 다른 서비스에 의해 이용되고 있습니다.단, 첫 번째 서비스를 통해 버튼 클릭 이벤트를 필터링하여 두 번째 서비스를 통해 처리해 주었으면 합니다.두 번째 서비스에서는 버튼을 인식하지 않도록 하고 싶기 때문에 첫 번째 서비스에서는 커스텀이벤트를 작성해야 할 것 같습니다.커스텀 이벤트를 만들고 버튼을 클릭했을 때 이벤트를 실행하려면 어떻게 해야 합니까?

잘 부탁드립니다.

서비스/디렉티브 사용 간에 이벤트를 전송하고 싶은 경우broadcast:

$rootScope.$broadcast('buttonPressedEvent');

다음과 같이 받습니다.

$rootScope.$on('buttonPressedEvent', function () {
             //do stuff
        })

글로벌 스코프 베이스의 통합은, 네임 스페이스를 해쳐, 중대규모의 애플리케이션에서는 큰 부작용을 일으킬 가능성이 있습니다.조금 더 복잡하지만 깔끔한 프록시 서비스를 추천합니다.

1. 프록시 서비스 작성

angular.module('app').service('userClickingHelper', [
  function() {
    var listeners = [];
    return {
      click: function(args) {
        listeners.forEach(function(cb) {
          cb(args);
        });
      },
      register: function(callback) {
        listeners.push(callback);
      }
    };
  }
]);

2. user Clicking Helper를 의존관계로 사용하는 버튼 디렉티브를 만듭니다.

angular.module('app').directive('onDistributedClick', ['userClickingHelper', function (userClickingHelper) {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.on('click', userClickingHelper.click);
        }
    };
}]);

3. 프록시를 사용하여 관련 없는 서비스를 등록합니다.

angular.module('app').service('myUnrelatedService', [function (userClickingHelper) {
    userClickingHelper.register(function(){
        console.log("The button is clicked somewhere");
    });
}]);

그 결과, 이벤트 전달의 범위가 고립됩니다만, 디렉티브도 서비스도 서로에 대해 인식하고 있지 않습니다.유닛 테스트도 간단합니다.

컨트롤러/서비스가 "사용자는 지금 클릭하거나 다른 것을 클릭해서는 안 된다"고 말하는 방식을 추상화할 수 있도록 글로벌하게 액세스 가능한 "로드 중" 모달에 동일한 솔루션을 사용하고 있습니다.

요소에서 다음 항목을 사용하여 이벤트를 만들고 내보낼 수 있습니다.

ng-click="$emit('customEvent')"

그 후 컨트롤러에서

$rootScope.$on('customEvent', function(){
    // do something
})

데모

언급URL : https://stackoverflow.com/questions/24129710/how-do-i-create-a-custom-event-in-an-angularjs-service