【问题标题】:$emit not working while emit data from one controller to another controller in angularjs$emit 在angularjs中从一个控制器向另一个控制器发送数据时不起作用
【发布时间】:2016-06-23 12:44:02
【问题描述】:

我尝试在将数据从一个控制器发送到另一个控制器时调用函数 在 AngularJS 中。但它在 Angular v.1.2 中对我不起作用。我需要从ctrl2 调用ctrl1 函数。谁能给我一些关于这个问题的想法?

示例代码:

    <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'});
}

【问题讨论】:

  • 您也应该发布您的标记。声明控制器的顺序很重要。您的代码没有明显的问题。
  • 好的,我会检查这个
  • 这完全取决于你的控制器是如何嵌套的。试试$rootScope.$emit(),这样行吗?

标签: javascript angularjs angularjs-scope


【解决方案1】:

或者你可以同时使用发射和广播。子范围发射,父母广播。像这样: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'}); 
  };
});

【讨论】:

    【解决方案2】:

    $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,但这样做时要小心,因为如果控制器嵌套发生变化,这可能会停止工作。

    【讨论】:

    • 我已经尝试将数据从一个控制器发送到父控制器内的另一个控制器..ctrl1 和 ctrl2 放置在一个父控制器内。我会为此做些什么
    【解决方案3】:

    ctrl2 函数应该是这样的:

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

    $emit 是向上发送,$broadcast 是向下发送。 $rootScope 位于顶部。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-06-15
      • 1970-01-01
      • 2017-08-24
      • 2013-07-20
      • 1970-01-01
      • 2010-09-30
      • 1970-01-01
      相关资源
      最近更新 更多