Angularjs 跨控制器使用服务的共享模型

在这里，学生开发者远远超过了我的头脑，与角度和更高级的JavaScript有关

我正在尝试增强一个基本的Angular应用程序，需要在控制器之间共享一个模型，这样我就可以在列表中的数组中选择一个item JSON对象，以显示来自同一对象的更多数据

服务：

(function() {
'use strict';

angular
    .module('App')
    .factory('companiesService', ['$http', 'ngAuthSettings', companiesService]); 


    function companiesService($http, ngAuthSettings) {

        var serviceBase = ngAuthSettings.apiServiceBaseUri;

        var Companies = function() {
                this.records = [];
                this.loading = false;
                this.params = {};
                this.params.filter = this.filter;
                this.params.offset = 0;
                this.params.max = 10;
        };

        Companies.prototype = {
            loadData : function() {
                if (this.loading || this.error || this.end) return;
                this.loading = true;

                $http({
                    method : 'POST',
                    url : serviceBase + 'company.php',
                    data : $.param(this.params), 
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
                }).then(function(response) {

                    for (var i = 0, len = response.data.records.length; i < len; i++) {
                        this.records.push(response.data.records[i]);
                    }
                    this.error = response.data.error; 
                    this.message = response.data.message;
                    this.params.offset = parseInt(response.data.offset) + this.params.max;
                    this.end = len < this.params.max; 
                    this.loading = false;
                }.bind(this));
            },
            getCompany : function(id) {
                var recs = this.records;
                if (recs) {
                    for (var i = 0, len = recs.length; i < len; i++) {
                        if (recs[i].id == id) {
                            return recs[i];
                        } else {
                            return -1;
                        }
                    }
                }
            }

        };
        return Companies;
    }
})();

---

第二个控制器如何访问相同的数据，即返回的“公司”的records属性？或者更具体地说，我如何在服务中调用此第二个控制器中这些记录的getCompany函数？

正如您使用工厂一样，在控制器中使用new关键字时，您正在创建Companys对象的新实例。如果您需要另一个控制器来访问这个新创建的公司，您有几个选择，但我相信最好的选择是创建一个服务，创建一个公司对象，您的两个控制器都可以通过注入访问该对象。例如：

.service('MyCompanies', function(companiesService){
    var state = {
        companies: new companiesService()
    };
    return {
        getState: function(){ return state; }
    };
});

然后，您可以将MyCompanies注入两个控制器，并访问相同的公司实例：

$scope.state = MyCompanies.getState();
// now $scope.state.companies will be the same for any controller that calls the line above.

---

虽然它们都可以实现相同的功能，但我相信您应该将工厂视为创建功能的组件，将服务视为具有某种状态的组件，其他组件可以与之交互。

我不理解您的代码。为此，您可以创建一个单独的组件：

function CompaniesService($http, ngAuthSettings) {
    .
    .
    .

    var companyCache = {};

    return {
            getCompany : function(id, callback) {
            var existInCache = companyCache[id];
            if(existInCache)
                callback(companyCache[id]);
            else{    
                $http({
                    method : 'POST',
                    url : serviceBase + 'company.php',
                    data : $.param(this.params), 
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
                }).then(function(response) {
                    companyCache[id] = response.data;
                    callback(companyCache[id]);
                });
            }
        }
    };
}

在控制器中，传递为：

angular.module('App').controller('Controller1', ['$scope', 'CompaniesService']);
angular.module('App').controller('Controller2', ['$scope', 'CompaniesService']);
angular.module('App').controller('Controller3', ['$scope', 'CompaniesService']);

function Controller1($scope, CompaniesService) {
    $scope.companies = CompaniesService.getCompany(function(data){
        $scope.companies = data;
    });
}

function Controller2($scope, CompaniesService) {
    $scope.companies = CompaniesService.getCompany(function(data){
        $scope.companies = data;
    });
}

function Controller3($scope, CompaniesService) {
    $scope.companies = CompaniesService.getCompany(function(data){
        $scope.companies = data;
    });
}

---

在我看来，您正在创建companys类的特定实例。如果有多个并发用户，并且您使用一个服务通过使用一个服务创建类的多个实例。您是否可能有多个用户，甚至同一用户在不同控制器下工作，假设他们使用相同的继承操作同一对象，而实际上他们是不同的对象，这可能会在以后给您带来问题；没有回应，我修正了。非常感谢。非常感谢。正是我想要的。

angular.module('App').controller('Controller1', ['$scope', 'CompaniesService']);
angular.module('App').controller('Controller2', ['$scope', 'CompaniesService']);
angular.module('App').controller('Controller3', ['$scope', 'CompaniesService']);

function Controller1($scope, CompaniesService) {
    $scope.companies = CompaniesService.getCompany(function(data){
        $scope.companies = data;
    });
}

function Controller2($scope, CompaniesService) {
    $scope.companies = CompaniesService.getCompany(function(data){
        $scope.companies = data;
    });
}

function Controller3($scope, CompaniesService) {
    $scope.companies = CompaniesService.getCompany(function(data){
        $scope.companies = data;
    });
}