如何将我的$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如何工作?


当前回答

作用域可用于将事件传播、分派到作用域的子对象或父对象。

$emit -将事件传播到父节点。$broadcast -向儿童传播事件。 监听事件的方法,由$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/

其他回答

根据angularjs事件文档,接收端应该包含这样结构的参数

@params

——{Object} event是包含事件信息的事件对象

——由被调用者传递的{Object}参数(注意,这只能是一个,所以总是在字典对象中发送更好)

美元的范围。$on('fooEvent',函数(事件,args) {console.log(args)}); 从你的代码

另外,如果你想让共享信息在不同的控制器间可用,还有另一种方法可以实现,那就是angular服务。由于服务是单例的,信息可以跨控制器存储和获取。只需在该服务中创建getter和setter函数,公开这些函数,在服务中创建全局变量并使用它们存储信息

我还会建议第四个选项,作为@zbynour提议的选项的更好替代方案。

使用rootScope美元。$emit而不是$rootScope。不管发送和接收控制器之间的关系。这样,事件就保留在$rootScope的集合中。$$监听器,而$rootScope。将事件传播到所有子作用域,其中大多数子作用域可能不是该事件的监听器。当然,在接收控制器端,你只需使用$rootScope。$on。

对于这个选项,你必须记得销毁控制器的rootScope监听器:

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

你必须使用$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完成的。

最简单的方法:

超文本标记语言

  <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>

首先,亲子范围关系确实很重要。你有两种可能触发事件:

$broadcast——向下分派事件到所有子作用域, $emit——通过作用域层次结构向上分派事件。

我对你的控制器(作用域)关系一无所知,但有几个选项:

If scope of firstCtrl is parent of the secondCtrl scope, your code should work by replacing $emit by $broadcast in firstCtrl: function firstCtrl($scope) { $scope.$broadcast('someEvent', [1,2,3]); } function secondCtrl($scope) { $scope.$on('someEvent', function(event, mass) { console.log(mass); }); } In case there is no parent-child relation between your scopes you can inject $rootScope into the controller and broadcast the event to all child scopes (i.e. also secondCtrl). function firstCtrl($rootScope) { $rootScope.$broadcast('someEvent', [1,2,3]); } Finally, when you need to dispatch the event from child controller to scopes upwards you can use $scope.$emit. If scope of firstCtrl is parent of the secondCtrl scope: function firstCtrl($scope) { $scope.$on('someEvent', function(event, data) { console.log(data); }); } function secondCtrl($scope) { $scope.$emit('someEvent', [1,2,3]); }