如何在angularjs中广播HTTP post方法的数据

时间:2016-02-05 14:35:36

标签: angularjs

我在不同的控制器中使用相同的HTTP方法,如下面的示例:

服务

var method="sampleMethod"
    HotalStatisticService.GetReservations = function (data) {
        return $http({
            method: 'POST',
            data: data,
            cache: false,
            url:'http://sample.com/'+method
        });
    }

第一个控制器

.controller("SampleACtrl", function ($scope,HotalStatisticService ) {
    HotalStatisticService.GetReservations({start:start, end:end, type:type})
        .success(function (data) {
         $scope.sampleA=data;
        })
}

第二个控制器

.controller("SampleBCtrl", function ($scope,HotalStatisticService ) {
    HotalStatisticService.GetReservations({start:start, end:end, type:type})
            .success(function (data) {
             $scope.sampleB=data;
            })
    }

如何在唯一的控制器中使用here方法?

2 个答案:

答案 0 :(得分:0)

让我说使用工厂的其他解决方案可能是一个更好的解决方案。使用服务也是一个不错的选择。

另一种可能粗暴的做法是使用$ rootScope.Answer。

您基本上想要做的是在两个控制器之间共享数据。根据你对评论的回复,两个控制器都属于同一个模块。你可以在这里使用$rootScope作为共同点。

如您所见,我已在两个控制器中添加$rootScope作为依赖项,并在第二个div中打印txt变量。

JS代码

var app = angular.module('plunker', []);

app.controller('ACtrl', function($scope,$rootScope) {
  $scope.name = 'This is Controller A ';
  $scope.execute = function() {
    alert('Executed!');
  }
  $rootScope.txt="Hi there from the other side";
});

app.controller('BCtrl', function($scope,$rootScope) {
  $scope.name = 'This is Controller B ';

});

<强> HTML

<div ng-controller="ACtrl">
    <p>Hello {{name}}!</p>

  </div>


  <div ng-controller="BCtrl">
    <p>Hello {{name}}!</p>
    {{txt}}
  </div>

以下是 DEMO

答案 1 :(得分:0)

我要做的是创建一个处理HTTP请求的factory service,然后将该服务注入您的控制器......代码看起来像这样:

var app = angular.module(&#39; sampleApp&#39;);

app.factory('sampleFactory', ['$http',
    function($http) {

        return {
            getData: function(success, fail) {
                if (_dataStore) {
                    success(_dataStore);
                }

                $http({
                    //fill in your params here
                }) 
                .then(
                function successCallback(response) {
                    //store data in the _dataStore object
                    success(response)
                }, fail(response))
            },

            _dataStore: {}
        }
    }
]);

app.controller('SampleACtrl', ['$scope', 'sampleFactory',
    function($scope, sampleFactory) {
        $scope.sampleA = sampleFactory.getData(success, fail);
    }
]);

app.controller('SampleBCtrl', ['$scope', 'sampleFactory',
    function($scope, sampleFactory) {
        $scope.sampleB = sampleFactory.getData(success, fail);
    }
]);

这样做的主要思想是,您只需要发出一次HTTP请求,然后将数据作为对象存储在工厂中。当您在该对象上调用getData()函数时,您将获得工厂中实际存在的内容(意味着已经发出请求),或者您将发出请求。当您的响应函数发送到$ http调用时,您将传递2个函数(成功或失败)。到目前为止,这并不是100%好,有很多改进(在那里增加$ q来回报承诺等),但这是一个正确方向的开始。
长话短说:使用工厂!