[javascript] $ scope. $ emit 및 $ scope. $ on으로 작업

. $ emit 및. $ on 메소드를 사용하여 한 컨트롤러에서 다른 컨트롤러로 $ scope 객체를 보내려면 어떻게해야합니까?

$ scope를 포함하여 앱의 계층 구조 내에서 원하는 객체를 보낼 수 있습니다 .

다음은 브로드 캐스트 및 방출 작동 방식에 대한 간단한 아이디어 입니다.

아래 노드를 확인하십시오. 이 시나리오는 브로드 캐스트를 사용 하고 방출 합니다.

참고 : 이 예에서 각 노드의 수는 임의입니다. 그것은 쉽게 1 위가 될 수 있습니다. 두 번째; 또는 심지어 1,348의 숫자. 각 숫자는이 예의 식별자 일뿐입니다. 이 예제의 핵심은 Angular 컨트롤러 / 지시문의 중첩을 보여주는 것입니다.

                 3
           ------------
           |          |
         -----     ------
         1   |     2    |
      ---   ---   ---  ---
      | |   | |   | |  | |

이 나무를 확인하십시오. 다음 질문에 어떻게 대답하십니까?

참고 : 이러한 질문에 대답하는 다른 방법이 있지만 여기서는 broadcast 및 emit에 대해 설명 합니다. 또한 아래 텍스트를 읽을 때 각 숫자에는 one.js, two.js, three.js와 같은 자체 파일 (직접, 컨트롤러)이 있다고 가정합니다.

노드 1 은 노드 3과 어떻게 통신합니까?

파일 one.js에서

scope.$emit('messageOne', someValue(s));

three.js 파일 -통신에 필요한 모든 하위 노드에 대한 최상위 노드.

scope.$on('messageOne', someValue(s));

노드 2는 노드 3과 어떻게 통신합니까?

파일 two.js에서

scope.$emit('messageTwo', someValue(s));

three.js 파일 -통신에 필요한 모든 하위 노드에 대한 최상위 노드.

scope.$on('messageTwo', someValue(s));

노드 3은 노드 1 및 / 또는 노드 2와 어떻게 통신합니까?

three.js 파일 -통신에 필요한 모든 하위 노드에 대한 최상위 노드.

scope.$broadcast('messageThree', someValue(s));

파일 one.js && two.js 에서 메시지를 잡으려는 파일 또는 둘 다.

scope.$on('messageThree', someValue(s));

노드 2는 노드 1과 어떻게 통신합니까?

파일 two.js에서

scope.$emit('messageTwo', someValue(s));

three.js 파일 -통신에 필요한 모든 하위 노드에 대한 최상위 노드.

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

파일 one.js에서

scope.$on('messageTwo', someValue(s));

하나

이러한 중첩 된 자식 노드가 모두 이와 같이 통신하려고하면 많은 $ on , $ broadcast ‘s 및 $ emit ‘s 가 빠르게 나타납니다 .

여기 내가 좋아하는 일이 있습니다.

상위 PARENT NODE ( 이 경우 3) 에서 상위 컨트롤러 일 수 있습니다.

따라서 파일 three.js에서

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

이제 모든 하위 노드 에서 메시지 를 $ emit 하거나 $ on을 사용하여 잡기 만하면 됩니다 .

참고 : 일반적으로 $ emit , $ broadcast 또는 $ on 을 사용하지 않고 하나의 중첩 경로에서 대화하기가 매우 쉽습니다. 즉, 대부분의 사용 사례는 노드 1 이 노드 2 와 통신 하거나 그 반대로 통신 하려고 할 때 사용됩니다 .

노드 2는 노드 1과 어떻게 통신합니까?

파일 two.js에서

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){ // for some event.
  return { name: 'talkToOne', data: [1,2,3] };
}

three.js 파일 -통신에 필요한 모든 하위 노드에 대한 최상위 노드.

우리는 이미 이것을 기억 했습니까?

파일 one.js에서

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

잡으려는 각 특정 값과 함께 $ on 을 사용해야 하지만 이제는 잡거나 브로드 캐스트 할 때 부모 노드 간격을 넘어서 메시지를 얻는 방법에 대해 걱정할 필요없이 모든 노드에서 원하는 것을 만들 수 있습니다. 일반 pushChangesToAllNodes .

도움이 되었기를 바랍니다…

답변

$rootScope.$broadcast('myEvent',$scope.data);//Here `myEvent` is event name

$rootScope.$on('myEvent', function(event, data) {} //listener on `myEvent` event

$scope.$on('myEvent', function(event, data) {}

  var customeEventListener = $rootScope.$on('myEvent', function(event, data) {

  }
  $scope.$on('$destroy', function() {
        customeEventListener();
  });

   $rootScope.$emit('myEvent',$scope.data);

   $rootScope.$on('myEvent', function(event, data) {}//$scope.$on not works

app.controller('firstCtrl', function($scope, $rootScope) {
        function firstCtrl($scope) {
        {
            $rootScope.$emit('someEvent', [1,2,3]);
        }
}

app.controller('secondCtrl', function($scope, $rootScope) {
        function secondCtrl($scope)
        {
            $rootScope.$on('someEvent', function(event, data) { console.log(data); });
        }
}

function ParentController($scope, testService) {
    testService.getList()
        .then(function(data) {
            $scope.list = testService.list;
        })
        .finally(function() {
            $scope.$emit('listFetched');
        })


    function ChildController($scope, testService) {
        $scope.$on('listFetched', function(event, data) {
            // use the data accordingly
        })
    }

    app.service('testService', ['$http', function($http) {

        this.list = [];

        this.getList = function() {
            return $http.get(someUrl)
                .then(function(response) {
                    if (typeof response.data === 'object') {
                        list = response.data.results;

                        return response.data;
                    } else {
                        // invalid response
                        return $q.reject(response.data);
                    }

                }, function(response) {
                    // something went wrong
                    return $q.reject(response.data);
                });

        }

    }])

$rootScope.$emit('setTitle', newVal.full_name);

$rootScope.$on('setTitle', function(event, title) {
    if (scope.item)
        scope.item.name = title;
    else
        scope.item = {name: title};
});