Question

在这个例子中，我想创建一个简单的应用程序，如果用户按下按钮，则调用另一个控制器中的函数。然而，应用程序中没有任何事情发生，因为$ emit没有被调用。

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


app.controller('ControllerOne', function($scope) {

    $scope.$on('foo', function(event, args) {
             alert(args);
         });
});

app.controller('ControllerTwo', function($scope) {

    $scope.call_controller = function () {
    $scope.$emit('foo', 'button was clicked!');    
    }
});

HTML：

<div ng-controller="ControllerOne">
</div>

<div ng-controller="ControllerTwo">
    <button ng-click="call_controller();">Click me</button>
</div>

Answer 1

虽然您应该使用服务在两个控制器之间进行通信。

我正在解释为什么你的代码无效。代码背后的原因是你的控制器都在DOM的同一层次结构上。控制器都没有遵循任何类型的范围继承。因此，您需要获取可用的帮助$scope将事件发送给其父级，而不是使用$broadcast，以任何方式将$rootScope作为其父级的父级。 $rootScope.$on会听取此事件。

更多预先

<强> ControllerOne

app.controller('ControllerOne', function ($scope, $rootScope) {
    $rootScope.$on('foo', function (event, args) {
        alert(args);
    });
});

ControllerTwo

app.controller('ControllerTwo', function ($scope, $rootScope) {
    $scope.call_controller = function () {
        console.log("clicked");
        $scope.$emit('foo', 'button was clicked!');
    }
});

Working Fiddle

Answer 2

或使用服务或使用：

要发送消息，请从rootScope广播您的消息。

$rootScope.$broadcast('foo', 'button was clicked!');

和$scope.$on接收

Answer 3

正如其他人所说，您应该使用服务在控制器之间共享数据。

但是为了学习，emit会向父母发送事件，并且广播发送到子范围。你必须有一个共同的父范围来处理这个问题。

所以你需要这样的东西：

app.controller('MasterCtrl', function($scope) { 

    // This picks up the event controller two is sending, 
    // and sends another one so controller one will get it    
    $scope.$on('fooEmit', function(event, args) {
         $scope.$broadcast('foo', args);
    });
});

Fiddle

像其他人提到的另一个选择是使用$rootScope并保持主控制器，但我个人的偏好是尽可能保持$rootScope不受影响，除非绝对必要。广播/发射也是如此，你可以找到另一种方法。

Angular - 无法使用$ emit和$ on调用另一个控制器中的函数

3 个答案: