控制器之间的正确通信方式是什么?

我目前正在使用一个可怕的软糖涉及窗口:

function StockSubgroupCtrl($scope, $http) {
    $scope.subgroups = [];
    $scope.handleSubgroupsLoaded = function(data, status) {
        $scope.subgroups = data;
    }
    $scope.fetch = function(prod_grp) {
        $http.get('/api/stock/groups/' + prod_grp + '/subgroups/').success($scope.handleSubgroupsLoaded);
    }
    window.fetchStockSubgroups = $scope.fetch;
}

function StockGroupCtrl($scope, $http) {
    ...
    $scope.select = function(prod_grp) {
        $scope.selectedGroup = prod_grp;
        window.fetchStockSubgroups(prod_grp);
    }
}

当前回答

我将创建一个服务并使用通知。

在Notification Service中创建一个方法 在“通知服务”中创建用于广播通知的通用方法。 从源控制器调用notificationService.Method。如果需要,我还将相应的对象传递给持久化。 在该方法中,我将数据持久化到通知服务中并调用通用notify方法。 在目标控制器中,我监听($scope.on)广播事件并从通知服务访问数据。

在任何情况下,notificationservice都是单例的,它应该能够跨跨提供持久数据。

希望这能有所帮助

其他回答

实际上,使用emit和broadcast效率很低,因为事件会在作用域层次结构中上下冒泡,这很容易导致复杂应用程序的性能瓶颈。

我建议使用服务。以下是我最近在我的一个项目https://gist.github.com/3384419中实现它的方法。

基本思想——将发布/事件总线注册为服务。然后在需要订阅或发布事件/主题的地方注入事件总线。

你可以在模块的任何地方访问这个hello函数

控制器的一个

 $scope.save = function() {
    $scope.hello();
  }

第二个控制器

  $rootScope.hello = function() {
    console.log('hello');
  }

更多信息请点击这里

你可以通过使用angular事件$emit和$broadcast来实现。据我们所知,这是最好、高效和有效的方法。

首先,我们从一个控制器调用一个函数。

var myApp = angular.module('sample', []);
myApp.controller('firstCtrl', function($scope) {
    $scope.sum = function() {
        $scope.$emit('sumTwoNumber', [1, 2]);
    };
});
myApp.controller('secondCtrl', function($scope) {
    $scope.$on('sumTwoNumber', function(e, data) {
        var sum = 0;
        for (var a = 0; a < data.length; a++) {
            sum = sum + data[a];
        }
        console.log('event working', sum);

    });
});

你也可以用$rootScope代替$scope。相应地使用你的控制器。

从angular 1.5开始,它的基于组件的开发重点。组件交互的推荐方式是使用'require'属性和通过属性绑定(输入/输出)。

一个组件需要另一个组件(例如根组件),并获得对它的控制器的引用:

angular.module('app').component('book', {
    bindings: {},
    require: {api: '^app'},
    template: 'Product page of the book: ES6 - The Essentials',
    controller: controller
});

然后你可以在你的子组件中使用根组件的方法:

$ctrl.api.addWatchedBook('ES6 - The Essentials');

这是根组件控制器函数:

function addWatchedBook(bookName){

  booksWatched.push(bookName);

}

下面是一个完整的体系结构概述:组件通信

上面的答案是@zumalifeguard提到的一个Angular问题,这个问题已经不存在了(至少在>1.2.16版本和“可能更早”)。但我读了所有这些答案,却没有一个实际的解决方案。

在我看来,现在的答案应该是

使用$rootScope中的$broadcast 从需要了解事件的本地$作用域使用$on进行监听

所以要发表

// EXAMPLE PUBLISHER
angular.module('test').controller('CtrlPublish', ['$rootScope', '$scope',
function ($rootScope, $scope) {

  $rootScope.$broadcast('topic', 'message');

}]);

和订阅

// EXAMPLE SUBSCRIBER
angular.module('test').controller('ctrlSubscribe', ['$scope',
function ($scope) {

  $scope.$on('topic', function (event, arg) { 
    $scope.receiver = 'got your ' + arg;
  });

}]);

普伦克斯

常规$scope语法(如上所示) new Controller As语法

如果您在本地$作用域上注册了侦听器,当关联的控制器被删除时,它将被$destroy自身自动销毁。