AngularJS $rootScope.$on 未通过路由捕获或传递服务数据

Question

我想将数据从一个 Controller 发送到另一个 Controller 。其实我已经关注了这个link

我的第一个 Controller 是这样的:

class ProductCtrl

constructor: ($scope, @$log, @$location, @$timeout, @ProductService) ->   

    $scope.go = (path) =>
        $scope.$emit('handleEmit', @getAllProducts())
        $location.path path

第二个:

class UpdateProductCtrl

constructor: ($scope, @$log, @$routeParams) ->
    $scope.$on('handleBroadcast', (event, data) ->
        console.log(data)
    )

应用程序咖啡:

app = angular.module('myApp', dependencies)
app.run ($rootScope, editableOptions) ->    
    $rootScope.$on 'handleEmit', (event, args) ->
        $rootScope.$broadcast 'handleBroadcast', args

当我在 ProductCtrl 中调用 $scope.$emit('handleEmit', @getAllProducts()) 时，内部应用程序咖啡 $rootScope.$on 'handleEmit' 不会触发。请帮助我我做错了什么。

Answer 1

从我的其他答案的评论中，我了解到这 2 个 Controller 位于 2 条不同的路线上。使用事件来通信数据不会以这种方式工作，因为当第一个 Controller 发出事件时，第二个 Controller 尚未注册其监听器。

因此，您需要另一种方式在路由之间传递数据。您可以使用服务来做到这一点，但由于服务是全局对象，因此您需要对传递的数据进行某种范围界定和维护，以免积累垃圾或使用过时的数据。

您可以创建一个类似于全局“存储”对象的服务，具有以下属性:

• 它可以接受用于下一个路线的数据
• 它可以传送当前路线的数据

该服务在内部维护两个“桶”。所有 put 操作均在 nextRouteBucket 上执行，所有 get 操作均在 currentRouteBucket 上执行。当 Angular 的路由器广播 $routeChangeStart 事件时，服务会切换存储桶并进行清理。

class NavScope
  constructor: ($rootScope) ->
    @currentRouteBucket = {}
    @nextRouteBucket = {}

    $rootScope.$on '$routeChangeStart', () =>
      @currentRouteBucket = @nextRouteBucket
      @nextRouteBucket = {}

  put: (name, data) ->
    @nextRouteBucket[name] = data

  get: (name) ->
    @currentRouteBucket[name]

下一个路由上的 Controller 可以简单地调用 navScope.get 'someKey' 来检索上一个路由中的数据，或者在路由 resolve 对象中检索它们(请参阅 plunker )。

请记住，这只是一个原型(prototype)，可能会出现一些极端情况，例如用户使用浏览器“后退”和“前进”导航或路由失败时。您始终必须将关联的 ID 放在 URL 上，以便在 navScope 上找不到数据时，从服务器检索它们。

看看这个骗子 here .