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

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

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

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

当前回答

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

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

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

2012-08-18 04:30:08

其他回答

function mySrvc() {
  var callback = function() {

  }
  return {
    onSaveClick: function(fn) {
      callback = fn;
    },
    fireSaveClick: function(data) {
      callback(data);
    }
  }
}

function controllerA($scope, mySrvc) {
  mySrvc.onSaveClick(function(data) {
    console.log(data)
  })
}

function controllerB($scope, mySrvc) {
  mySrvc.fireSaveClick(data);
}

2015-03-12 07:23:35

从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);

}

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

2016-11-24 10:15:57

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

控制器的一个

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

第二个控制器

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

更多信息请点击这里

2014-03-18 09:56:54

使用rootScope美元。$broadcast和$scope。$on PubSub通信。

另外，请参阅这篇文章:AngularJS -控制器之间的通信

2012-06-28 21:17:14

GridLinked发布了一个PubSub解决方案，看起来设计得很好。该服务可以在这里找到。

还有他们的服务图表:

2012-07-10 20:47:26

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

推荐文章

最新文章

标签