$ emit从一个控制器向angularjs中的另一个控制器发送数据时不工作

时间:2015-12-18 15:32:59

标签: javascript angularjs angularjs-scope

我尝试在从一个控制器向另一个控制器发出数据的同时调用函数 在AngularJS中。但它在Angular v.1.2中对我没有用。我需要从ctrl1调用ctrl2函数。任何人都可以就这个问题给我一些想法吗?

示例代码:

    <div ng-contorller="ctrl">
      <div ng-contorller="ctrl1">
      </div>
      <div ng-contorller="ctrl2">
      </div>
    </div>

function parentctrl(){

}
function ctrl1($scope){
 $scope.callfn = function(){
 console.log("success");
}
 $scope.$on('emitdata', function(event, data){
    $scope.callfn();
 })
}
function ctrl2($scope){       
 $scope.$emit('emitdata', {'key':'uu'});
}

3 个答案:

答案 0 :(得分:2)

或者你可以同时使用发射和广播。儿童范围发出,父母广播。像这样:http://plnkr.co/edit/pjGIHByzkwCeNiaVrdb6?p=preview

app.controller("ctrl", function($scope) {
  $scope.$on('emitdata', function(event, data) {
    // This event will reach: ctrl -> ctrl1 + ctrl2
    $scope.$broadcast('broadcast-data', data);
  });
});

app.controller("ctrl1", function($scope) {
  $scope.$on('broadcast-data', function(event, data) {
    $scope.received = data;
  })
});

app.controller("ctrl2", function($scope) {
  $scope.emit = function() {
    // This event will reach: ctrl2 -> ctrl -> rootScope
    $scope.$emit('emitdata', {'key': 'uu'}); 
  };
});

答案 1 :(得分:1)

$emit向上传播事件,这意味着发射控制器应位于侦听控制器内。

<div ng-controller="ctrlone">
    <div ng-controller="ctrltwo">
        <!-- ctrltwo is the emitting controller
             ctrlone is the listening controller -->
    </div>
</div>

现在,如果有两个控制器在同一级别,就像这样:

<div ng-controller="parent">
    <div ng-controller="ctrlone">
        <!-- i listen for an event -->
    </div>
    <div ng-controller="ctrltwo">
        <!-- i raise an event -->
    </div>
</div>

ctrlone没有直接与ctrltwo进行通信的方式,反之亦然。在这种情况下,您可以使用$rootScope.$broadcast代替emit

function ctrltwo($rootScope) {
    $rootScope.$broadcast('myEvent', {'key':'uu'});
}

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

您也可以使用$scope.$parent代替$rootScope,但在执行此操作时要小心,因为如果控制器嵌套发生更改,这可能会停止工作。

答案 2 :(得分:0)

这是ctrl2函数的外观:

function ctrl2($scope, $rootScope) {
    $rootScope.$broadcast('emitdata', {'key':'uu'});
}

$ emit是发送,$ broadcast是发送的。 $ rootScope位于顶部。