Question

在我的角度应用中，我有多个controllers，我需要将数据从一个发送到另一个controller，所以我使用$scope.$emit来传输数据，但不幸的是，它不是工作

var app = angular.module('tApp', []);
app.controller('masterpage', function($scope) {
  $scope.masterpagescope = 'A';
});
app.controller('subpage', function($scope) {
  $scope.subpagescope = ['data1', 'data2', 'data2+n'];

  $scope.sendData = function() {
    $scope.$emit('send-data', $scope.masterpagescope,   $scope.subpagescope);
    console.log($scope.masterpagescope);
  }
  $scope.sendData();
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="tApp">
  <div ng-controller="masterpage" id="masterpage">
    {{masterpagescope}}
    <div ng-controller="subpage" id="subpage">
    {{subpagescope}}
    </div>
  </div>
</div>

在上面的代码段中，我正在尝试将$scope.subpagescope的数据发送到$scope.masterpagescope

Answer 1

您需要使用$ on

来监听母版页控制器中的$ emit

app.controller('masterpage', function($scope) {
  $scope.masterpagescope = 'A';

  $scope.$on('send-data', function(event, data) { 
    $scope.masterpagescope = data; 
    });
});

app.controller('subpage', function($scope) {
  $scope.subpagescope = ['data1', 'data2', 'data2+n'];

  $scope.sendData = function() {
    $scope.$emit('send-data', $scope.subpagescope);
  }
  $scope.sendData();
});

关于该主题的推荐this文章

Answer 2

您尚未订阅父控制器中的事件。

$scope.$on('send-data', function(event, data){
//do whatever with data here...
});

此外，在发射时，将所有数据包含在一个对象中：

 $scope.$emit('send-data', {master: $scope.masterpagescope,   sub : $scope.subpagescope});

PS：存储$ on返回的值，这是订阅事件的注销功能。在页面的'destroy'上调用存储的函数。

Answer 3

您应该<div id="container" style="width:100%;whitespace:nowrap;overflow-x:scroll;> <div class="row" id="inner_row"> <table> <tr> <td>Zero</td> <td>One</td> <td>Two</td> <td>Three</td> <td>Zero</td> <td>One</td> <td>Two</td> <td>Three</td> </tr> </table> </div> </div>提出其他答案。

$scope.$on

但我强烈建议不使用$scope.$on('send-data', function() { ... }) / $emit在控制器之间共享数据。一个常见的Angular服务会做得更好。

更新：为什么我建议不要使用$broadcast / $emit？

$broadcast / $emit对初学者来说有点复杂。您可以在Angular范围树中$broadcast向上，向下$emit。如果您需要与同级（兄弟）范围进行通信，那么您需要在父范围内$broadcast然后$emit [或使用$broadcast？ - 注意上帝对象的反模式]。
每个$rootScope都会注册一个事件监听器。使用它可能会导致内存泄漏。当然你可以相应地杀死事件监听器（还有其他工作要做）。
如果$scope.$on / $emit / $broadcast周围的$scope.$on / {{1}} / {{1}}太多，代码可能会变得有些混乱。

使用$ emit将数据发送到另一个控制器

3 个答案: