$scope 사용.$190과 $190입니다.$on

$scope 사용.$190과 $190입니다.$on

내내은 my my my my my는 어떻게 요?$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는 scope, scope를 대체하는 것으로 합니다.$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가 제안하는 옵션보다 더 나은 대안으로 네 번째 옵션을 제안합니다.

$rootScope.$emit$rootScope.$broadcast트라스미팅 컨트롤러와 수신 컨트롤러의 관계에 관계없이 동작합니다. 하면, 그 은 계속 한 됩니다.$rootScope.$$listeners 반면에서는$rootScope.$broadcast이벤트는 모든 자녀 스코프로 전파되지만 대부분은 해당 이벤트의 청취자가 아닐 수 있습니다.컨트롤러 에서는 「」를 합니다.$rootScope.$on.

이 옵션을 사용하려면 컨트롤러의 rootScope 수신기를 삭제해야 합니다.

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

.$emit 및 .$on 메서드를 사용하여 컨트롤러 간에 $scope 객체를 전송하려면 어떻게 해야 합니까?

$scope를 포함하여 앱 계층 내에서 원하는 개체를 전송할 수 있습니다.

여기 작업을 방송하고 내보내는 방법에 대한 간단한 아이디어가 있습니다.

다음 노드에 주목하십시오.모두 노드 3 내에 네스트 됩니다.이 시나리오에서는 브로드캐스트와 방출을 사용합니다.

주의: 이 예에서는 각 노드의 수는 임의이며, 숫자 1, 2, 또는 숫자 1,348이 될 수도 있습니다.이 예에서는 각 번호가 식별자일 뿐입니다.이 예의 요점은 Angular 컨트롤러/지침의 네스트를 표시하는 것입니다.

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

이 나무 좀 봐.다음 질문에 어떻게 대답합니까?

주의: 이러한 질문에 대답하는 다른 방법이 있지만, 여기서는 브로드캐스트와 방출에 대해 설명합니다.또한 아래 텍스트를 읽을 때 각 번호에 고유한 파일(디렉티브, 컨트롤러)이 있다고 가정합니다.예를 들어, 1.js, 2.js, 3.js.

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

파일1.js로

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

in file 3.js - 통신에 필요한 모든 자식 노드의 최상위 노드.

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

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

파일 2 . js .

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

in file 3.js - 통신에 필요한 모든 자식 노드의 최상위 노드.

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

노드 3은 노드 1 및 노드2에 어떻게 통신합니까?

in file 3.js - 통신에 필요한 모든 자식 노드의 최상위 노드.

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

파일 1 . js & 2 . js & 、메시지를 받고 싶은 파일 또는 둘 다.

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

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

파일 2 . js .

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

in file 3.js - 통신에 필요한 모든 자식 노드의 최상위 노드.

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

파일1.js로

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

하지만

이렇게 네스트된 모든 하위 노드가 통신하려고 하면 많은 $on, $broadcast 및 $emit을 빠르게 볼 수 있습니다.

이게 내가 좋아하는 일이야.

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

그래서, 3번째 파일에.js

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

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

메모: 일반적으로 $emit, $broadcast 또는 $on을 사용하지 않고 하나의 중첩 경로로 크로스 토크를 하는 것은 매우 간단합니다.즉, 대부분의 사용 사례는 노드 1과 노드 2의 통신을 시도하거나 그 반대입니다.

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

파일 2 . js .

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

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

in file 3.js - 통신에 필요한 모든 자식 노드의 최상위 노드.

이 일은 이미 처리한 거 기억나?

파일1.js로

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

캐치하는 각 특정 값에 $on을 사용해야 하지만, 이제 일반적인 pushChangesToAllNodes를 캐치하여 브로드캐스트할 때 부모 노드의 갭을 넘어 메시지를 얻는 방법에 대해 걱정할 필요 없이 임의의 노드에서 원하는 것을 생성할 수 있습니다.

이게 도움이 되길...

송신하다$scope object어떤 컨트롤러에서 다른 컨트롤러로, 저는 그 컨트롤러에 대해 논의하겠습니다.$rootScope.$broadcast그리고.$rootScope.$emit여기서 가장 많이 쓰이기 때문에.

케이스 1:

$rootScope($rootScope 。$180:-

$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$1달러 $ $ $ $ $ $ $ 。

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

아니면...

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

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

케이스 2:

$rootScope($rootScope 。$140:

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

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

$emit과 $broadcast의 주요 차이점은 $rootScope입니다.$emit 이벤트는 $rootScope를 사용하여 재생해야 합니다.$on, 방출된 이벤트는 스코프 트리를 통해 내려오지 않기 때문입니다.
broadcastbroadcast $ broadcastbroadcast broadcastbroadcast broadcastbroadcast broadcastbroadcast broadcastbroadcast broadcastbroadcast broadcastbroadcast broadcastbroadcast 。

편집:

는 사사 i i i i i i i i i i i는 쓰지 않는 편이 .$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 또는 Services를 통해 이루어집니다.

약속을 반환하는 서비스를 컨트롤러에서 호출하여 컨트롤러에서 사용할 수 있습니다. 밖에도, 리리추 and and and를 사용합니다.$emit ★★★★★★★★★★★★★★★★★」$broadcast하다해야 했기 에 다음과 같은 을 수행했습니다.

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>

스코프를 사용하여 이벤트를 스코프 자녀 또는 부모에게 전파하거나 디스패치할 수 있습니다.

$syslog - 이벤트를 부모에게 전파합니다.$devails - 이벤트를 자녀에게 전파합니다.$on - 이벤트를 수신하는 메서드. $120 및 $120으로 전파됩니다.

index.disples:

<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.disples 예시:

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

테스트 코드는, http://jsfiddle.net/zp6v0rut/41/ 에서 확인할 수 있습니다.

다음 코드는 이벤트가 상위 컨트롤러(rootScope)로 디스패치되는 2개의 서브컨트롤러를 나타내고 있습니다.

<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 이벤트 문서에 따르면 수신측에는 다음과 같은 구조의 인수가 포함되어 있어야 합니다.

@패럴

-- {Object} 이벤트는 이벤트에 대한 정보를 포함하는 이벤트 개체입니다.

-- 착신측에서 전달되는 {Object}args(사전 객체에서 항상 전송하기에 가장 좋은 arg)입니다.

$scope.$on('fooEvent', function (event, args) { console.log(args) });의 코드로부터

또한 서로 다른 컨트롤러에서 공유 정보를 사용 가능하게 하려고 하는 경우, 이를 실현하기 위한 또 다른 방법이 있습니다.각형 서비스입니다.서비스는 싱글톤이므로 컨트롤러 간에 정보를 저장하고 가져올 수 있습니다.해당 서비스에서 getter 및 setter 함수를 만들고, 이러한 기능을 공개하고, 서비스에 글로벌 변수를 만들어 정보를 저장하기 위해 사용합니다.

가장 쉬운 방법:

HTML

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

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

    </div>

자바스크립트

    <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