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

当前回答

关于原始代码——看起来您想要在作用域之间共享数据。要在$scope之间共享数据或状态，文档建议使用服务:

要运行跨控制器共享的无状态或有状态代码-使用而是Angular服务。实例化或管理的生命周期其他组件(例如，用于创建服务实例)。

参考:Angular Docs链接在这里

2013-05-11 07:08:08

其他回答

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

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

2012-06-28 21:17:14

我喜欢$rootscope。使用Emit实现相互通信。我建议清洁和性能有效的解决方案，不污染全球空间。

module.factory("eventBus",function (){
    var obj = {};
    obj.handlers = {};
    obj.registerEvent = function (eventName,handler){
        if(typeof this.handlers[eventName] == 'undefined'){
        this.handlers[eventName] = [];  
    }       
    this.handlers[eventName].push(handler);
    }
    obj.fireEvent = function (eventName,objData){
       if(this.handlers[eventName]){
           for(var i=0;i<this.handlers[eventName].length;i++){
                this.handlers[eventName][i](objData);
           }

       }
    }
    return obj;
})

//Usage:

//In controller 1 write:
eventBus.registerEvent('fakeEvent',handler)
function handler(data){
      alert(data);
}

//In controller 2 write:
eventBus.fireEvent('fakeEvent','fakeData');

2015-10-04 08:59:19

你可以通过使用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。相应地使用你的控制器。

2017-05-25 13:16:41

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

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

推荐文章

最新文章

标签