javascript - $rootScope.$broadcast 未在 ui 路由器中获取

Question

我正在使用 ui-router 显示 2 个 ui-view，一个在另一个中。它们是这样组织的:

.state('itemAbstract', {
    url: '/items',
    abstract: true,
    templateUrl: 'client/views/item.ng.html',
    controller: 'moveCtrl',
})
.state('item', {
    url: "/:itemId",
    parent: "itemsAbstract",
    views: {
        "otherpage":{
            templateUrl: 'client/views/other-page.ng.html',
            controller: 'otherPageCtrl'
        }
    }
})

当一个项目被点击时，我在 otherpage Controller 中运行 followwing。

$rootScope.$broadcast("somethingClicked",obj)

我尝试在 item Controller 中监听事件:

$scope.$on("somethingClicked",function(a,b){
    console.log(a)
    console.log(b);
})

不幸的是，这个函数永远不会被调用。我尝试将此监听器函数放在 otherpage Controller 中，并且在事件发生时正确调用了它。但是，出于某种原因，此广播并未跨范围传输。这就是我使用它的全部原因，当单击父项中的某些内容时触发父项中的操作。关于为什么这不起作用的任何想法？

这是我的元素 Controller

angular.module('mm').controller('itemCtrl',
function($scope, $meteor, $rootScope, $state, $stateParams) {
    var s = $scope;
    s.rs = $rootScope;

    $scope.$on("somethingClicked",function(a,b){
        console.log("there as a click")
        console.log(a)
        console.log(b);
    })
}

我使用 Batarang 进行调试，发现尽管有这段代码，$scope 甚至没有注册事件监听器。 $scope.$$listeners 没有 somethingClicked 事件的监听器。很奇怪，为什么这不起作用是没有意义的。

Answer 1

也许您拥有未应用继承的独立 Controller 。 $scope 的继承是通过在你的 View 中嵌套 Controller 来声明的。在这种情况下，您可以使用 $rootscope 来广播或收听事件:

//ctrl1    
$rootScope.$broadcast("somethingClicked",obj);

//ctrl2

$rootScope.$on("somethingClicked",function(a,b){
    console.log(a)
    console.log(b);
});

看看这个简单的 demo以及较旧的 question在 Stack Overflow 上。

已编辑根据您的示例代码，我使用 $rootscope 进行通信完全没有问题。

状态声明使用一个抽象的父 Controller 和一个映射到 View 中的获取的子 Controller :

$stateProvider
        .state('test', {

          url: '/test',
          controller: 'pctrl',
          views: {
            'main': {
              template: '<div ng-controller="pctrl">{{test}}</div>' +
                '<div ui-view="childview"></div>'
            }
          }
        })
        .state('test.child', {
          url: '/test/child',
          controller: 'cctrl',
          views: {
            'childview': {
              template: '<div ng-controller="cctrl" />'
            }
          }
        });

这是一个 full working demo