Question

我第一次尝试angularjs并创建了一个服务，用于对我的应用程序API进行ajax调用并检索分页列表。我称之为“GridService”。该服务被注入一个控制器，一切都很好！直到我尝试在同一页面上的两个不同控制器内两次使用相同的服务。令我恐惧的是，服务的第二个实例会覆盖第一个（doh）

例如;我渲染两个部分如下：

        <div id="location_areas" class="container tab-pane fade" ng-controller="areasController" ng-init="initialise()">
            @include('areas._areas')
        </div>
        <div id="location_people" class="container tab-pane fade"  ng-controller="peopleController" ng-init="initialise()">
            @include('people._people')
        </div>

我将服务注入控制器，如下所示，并链接到服务属性

angular.module('areasController', [])

.controller('areasController', function($scope, $attrs, $http, AreaService, GridService, HelperService) {

$scope.areas = function() { return GridService.getListing() }
$scope.totalPages = function() { return GridService.getTotalPages() }
$scope.currentPage = function() { return GridService.getCurrentPage() }
$scope.columns = function() { return GridService.getColumns() }

最后，我的缩略服务就像

一样简单

angular.module（'gridService'，[]）

.provider（'GridService'，function（$ http）{

var columns = {};
var filters = {};
var listing = [];
var totalPages = 0;
var range;
var currentPage = 1;

return {

    /**
     * Get the requested data (JSON format) from storage then populate the class properties which
     * are bound to equivalent properties in the controller.
     *
     * @return void
     */
    list : function(url,pageNumber,data) {

        url = url+'?page='+pageNumber;

        for (var key in data) {

            if( angular.isArray( data[key] ) )
            {
                angular.forEach( data[key], function( value ) {
                    url = url+'&'+key+'[]='+value;
                });
            }
            else
            {
                url = url+'&'+key+'='+data[key];
            }
        }

        $http({ method: 'GET', url: url })
        .then(function(response) {
            listing             = response.data.data;
            totalPages          = response.data.last_page;
            range               = response.data.last_page;
            currentPage         = response.data.current_page;
            // Pagination Range
            var pages = [];

            for(var i=1;i<=response.data.last_page;i++) {          
                pages.push(i);
            }

            range = pages; 
        });
    },

显然我已经哄骗（doh）。是否有可能创建这种场景或者我误解了angularjs架构？

Answer 1

请使用相关的服务代码更新您的问题。根据定义，Angular中的服务是Singletons。他们不应该有任何私人国家。如果它们确实具有状态，则它应该是状态，这意味着在两个控制器之间共享。

如果你只是在你的服务中发出$ http请求，它应该只是向呼叫控制器返回承诺 - 不会导致任何＆＃34;重叠＆＃34;。

更新

您的服务似乎缺少几行。看起来它包含列，过滤器等。

所以这就是问题所在，它是一个单身人士。您应该将它分解为两个不同的类，即仍然进行AJAX调用以获取数据的网络层 - 以及返回Grid配置的新实例的工厂。

gridFactory.$inject = ['$http'];
function gridFactory($http) {

    return function(url, pageNumber, data) {

        // put your for (var key in data) logic here...

        return new Grid($http);
    }

}

function Grid($http) {

   var self = this;

   $http({ method: 'GET', url: url })
    .then(function(response) {

       self.listings = data.listings;
       self.totalPages = data.total_pages;
       ... 
       // put your grid config here following this pattern, attaching each to 
       // the 'self' property which is the prototype of the constructor.

  }
}

所以现在工厂将返回一个新网格＆＃39;每次打电话给工厂的对象。您需要像gridFactory(url, pageNumber, data);

那样致电工厂

angularjs中服务的范围是什么？

1 个答案: