$ scope. $ emit 및 $ scope. $ on 작업

$ scope. $ emit 및 $ scope. $ on 작업

---

및 메서드를 $scope사용하여 한 컨트롤러에서 다른 컨트롤러로 개체를 어떻게 보낼 수 있습니까?.$emit.$on

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

function secondCtrl($scope) {
    $scope.$on('someEvent', function(mass) { console.log(mass); });
}

내가 생각하는 방식으로 작동하지 않습니다. 어떻게 $emit하고 $on사용할 수 있습니까?

---

우선, 부모-자식 범위 관계가 중요합니다. 몇 가지 이벤트를 생성 할 수있는 두 가지 가능성이 있습니다.

• $broadcast -이벤트를 모든 하위 범위로 아래쪽으로 전달합니다.
• $emit -범위 계층을 통해 이벤트를 위쪽으로 전달합니다.

컨트롤러 (범위) 관계에 대해 아무것도 모르지만 몇 가지 옵션이 있습니다.

1. 범위가 범위의 firstCtrl부모 인 경우 secondCtrl코드는 in 으로 대체 $emit하여 작동해야합니다 .$broadcastfirstCtrl

   function firstCtrl($scope)
   {
       $scope.$broadcast('someEvent', [1,2,3]);
   }
   
   function secondCtrl($scope)
   {
       $scope.$on('someEvent', function(event, mass) { console.log(mass); });
   }
   

2. 스코프 사이에 부모-자식 관계가없는 경우 $rootScope컨트롤러에 주입 하고 이벤트를 모든 자식 스코프에 브로드 캐스트 할 수 있습니다 (예 :) secondCtrl.

   function firstCtrl($rootScope)
   {
       $rootScope.$broadcast('someEvent', [1,2,3]);
   }
   

3. 마지막으로 자식 컨트롤러에서 위쪽 범위로 이벤트를 전달해야 할 때 $scope.$emit. 범위가 범위의 firstCtrl상위 인 경우 secondCtrl:

   function firstCtrl($scope)
   {
       $scope.$on('someEvent', function(event, data) { console.log(data); });
   }
   
   function secondCtrl($scope)
   {
       $scope.$emit('someEvent', [1,2,3]);
   }
   

---

@zbynour가 제안한 옵션에 대한 더 나은 대안으로 4 번째 옵션을 추가로 제안합니다.

사용 $rootScope.$emit보다는 $rootScope.$broadcast없이 trasmitting 컨트롤러 수용의 관계. 이렇게하면 이벤트가 세트 내에 남아있는 $rootScope.$$listeners반면 $rootScope.$broadcast이벤트는 모든 하위 범위로 전파되며 대부분은 어쨌든 해당 이벤트의 리스너가 아닐 것입니다. 물론 수신 컨트롤러의 끝에서는 $rootScope.$on.

이 옵션의 경우 컨트롤러의 rootScope 리스너를 삭제해야합니다.

var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
  unbindEventHandler();
});

---

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

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

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

아래 노드를 확인하십시오. 모두 노드 3 내에 중첩됩니다 .이 시나리오 에서는 broadcast 및 emit를 사용 합니다.

참고 : 이 예에서 각 노드의 수는 임의입니다. 그것은 쉽게 넘버원이 될 수 있습니다. 두 번째; 또는 심지어 숫자 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 's , $ 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 .

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

---

보내려면 $scope object한 컨트롤러에서 다른 컨트롤러, I 대해 논의 $rootScope.$broadcast하고 $rootScope.$emit그들이 가장 많이 사용되는 여기에.

사례 1 :

$ rootScope. $ broadcast :-

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

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

$rootScope리스너는 자동으로 파괴되지 않습니다. 을 사용하여 삭제해야합니다 $destroy. $scope.$on리스너 $scope가 자동으로 삭제되므로 사용하는 것이 좋습니다. 즉 $ scope가 삭제되는 즉시 사용하는 것이 좋습니다 .

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

또는,

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

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

사례 2 :

$ rootScope. $ emit :

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

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

$ emit 및 $ broadcast의 주요 차이점은 $ rootScope. $ emit 이벤트는 $ rootScope. $ on을 사용하여 수신되어야한다는 것입니다. 이는 내 보낸 이벤트가 범위 트리를 통해 내려 오지 않기 때문입니다. .
이 경우에도 $ broadcast의 경우처럼 리스너를 삭제해야합니다.

편집하다:

나는 사용하지 않으 $rootScope.$broadcast + $scope.$on하지만 사용 $rootScope.$emit+ $rootScope.$on. $rootScope.$broadcast + $scope.$on콤보는 성능에 심각한 문제가 발생할 수 있습니다. 이벤트가 모든 범위를 통해 버블 링되기 때문입니다.

편집 2 :

이 답변에서 해결 된 문제는 angular.js 버전 1.2.7에서 해결되었습니다. $ broadcast는 이제 등록되지 않은 범위에 대한 버블 링을 방지하고 $ emit만큼 빠르게 실행됩니다.

---

$ rootScope를 사용하여 동일한 앱의 컨트롤러간에 이벤트를 보내고 캡처해야합니다. 컨트롤러에 $ rootScope 종속성을 삽입합니다. 다음은 작동하는 예입니다.

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); });
        }
}

$ scope 개체에 연결된 이벤트는 소유자 컨트롤러에서만 작동합니다. 컨트롤러 간의 통신은 $ rootScope 또는 서비스를 통해 수행됩니다.

---

컨트롤러에서 프라 미스를 반환하는 서비스를 호출 한 다음 컨트롤러에서 사용할 수 있습니다. 추가로 사용 $emit하거나 $broadcast다른 컨트롤러에 알리십시오. 제 경우에는 서비스를 통해 http 호출을해야했기 때문에 다음과 같이했습니다.

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};
});

---

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('parentCtrl',function($scope){
  $scope.$on('MyEvent',function(event,data){    
    $scope.myData = data;
  });
 });

app.controller('childCtrl',function($scope){
  $scope.fireEvent = function(){ 
  $scope.$emit('MyEvent','Any Data');
  }  
 });
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="parentCtrl" ng-model="myName">

{{myData}}

 <div ng-controller="childCtrl">
   <button ng-click="fireEvent()">Fire Event</button>
 </div>

</div>
</body>
</html>

---

결국 외부 EventEmitter 라이브러리를 서비스로 프로젝트에 추가하고 필요한 곳에 주입했습니다. 따라서 범위 상속을 신경 쓰지 않고 어디서나 "방출"및 "on"할 수 있습니다. 이런 식으로 문제가 적고 성능이 확실히 향상됩니다. 또한 나에게 더 읽기 쉽습니다.

와일드 카드 지원 : EventEmitter2

좋은 성능 : eventemitter3

다른 대안 : Drip

---

범위를 사용하여 범위 하위 또는 상위에 이벤트를 전파하고 전달할 수 있습니다.

$ emit- 이벤트를 상위에 전파합니다. $ broadcast- 이벤트를 어린이에게 전파합니다. $ on-$ emit 및 $ broadcast에 의해 전파되는 이벤트를 수신하는 방법.

index.html 예 :

<div ng-app="appExample" ng-controller="EventCtrl">
      Root(Parent) scope count: {{count}}
  <div>
      <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
      <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>

      Childrent scope count: {{count}} 
  </div>
</div>

예제 app.js :

angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}]);

여기에서 코드를 테스트 할 수 있습니다 : http://jsfiddle.net/zp6v0rut/41/

---

아래 코드는 이벤트가 상위 컨트롤러 (rootScope)로 전달되는 두 개의 하위 컨트롤러를 보여줍니다.

<body ng-app="App">

    <div ng-controller="parentCtrl">

        <p>City : {{city}} </p>
        <p> Address : {{address}} </p>

        <div ng-controller="subCtrlOne">
            <input type="text" ng-model="city" />
            <button ng-click="getCity(city)">City !!!</button>
        </div>

        <div ng-controller="subCtrlTwo">

            <input type="text" ng-model="address" />
            <button ng-click="getAddrress(address)">Address !!!</button>

        </div>

    </div>

</body>

var App = angular.module('App', []);

// parent controller
App.controller('parentCtrl', parentCtrl);

parentCtrl.$inject = ["$scope"];

function parentCtrl($scope) {

    $scope.$on('cityBoom', function(events, data) {
        $scope.city = data;
    });

    $scope.$on('addrBoom', function(events, data) {
        $scope.address = data;
    });
}

// sub controller one

App.controller('subCtrlOne', subCtrlOne);

subCtrlOne.$inject = ['$scope'];

function subCtrlOne($scope) {

    $scope.getCity = function(city) {

        $scope.$emit('cityBoom', city);    
    }
}

// sub controller two

App.controller('subCtrlTwo', subCtrlTwo);

subCtrlTwo.$inject = ["$scope"];

function subCtrlTwo($scope) {

    $scope.getAddrress = function(addr) {

        $scope.$emit('addrBoom', addr);   
    }
}

http://jsfiddle.net/shushanthp/zp6v0rut/

---

angularjs 이벤트 문서에 따르면 수신 측에는 다음과 같은 구조의 인수가 포함되어야합니다.

@params

-- {Object} event being the event object containing info on the event

-- {Object} args that are passed by the callee (Note that this can only be one so better to send in a dictionary object always)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); From your code

Also if you are trying to get a shared piece of information to be available accross different controllers there is an another way to achieve that and that is angular services.Since the services are singletons information can be stored and fetched across controllers.Simply create getter and setter functions in that service, expose these functions, make global variables in the service and use them to store the info

---

The Easiest way :

HTML

  <div ng-app="myApp" ng-controller="myCtrl"> 

        <button ng-click="sendData();"> Send Data </button>

    </div>

JavaScript

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $rootScope) {
            function sendData($scope) {
                var arrayData = ['sam','rumona','cubby'];
                $rootScope.$emit('someEvent', arrayData);
            }

        });
        app.controller('yourCtrl', function($scope, $rootScope) {
            $rootScope.$on('someEvent', function(event, data) {
                console.log(data); 
            }); 
        });
    </script>

참고URL : https://stackoverflow.com/questions/14502006/working-with-scope-emit-and-scope-on