Question

我试图访问包含我的项目的配置信息的json文件（诸如转号，项目名称，主要联系人等等）我创建了一个使用http.get检索json文件的工厂，我可以然后将数据拉入我的控制器，但我无法从控制器的任何位置访问它。

我没有写工厂，我发现它是对另一个人的问题的答案而且几乎完全被复制，所以如果不是正确的方法来完成我想要做的事，请纠正我。 / p>

这是工厂：

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

    var configFactory = {
        async: function() {
            // $http returns a promise, which has a then function, which also returns a promise
            var promise = $http.get('assets/json/config.json').then(function(response) {
                // The then function here is an opportunity to modify the response
                console.log(response.data.config);
                // The return value gets picked up by the then in the controller.
                return response.data.config;
            });
            // Return the promise to the controller
            return promise;
        }
    };
    return configFactory;

}]);

这是我的控制器：

app.controller('footerController', ['$scope', '$rootScope', 'configFactory', function footerController($scope, $rootScope, configFactory) {
    var body = angular.element(window.document.body);
    $scope.onChange = function(state) {
        body.toggleClass('light');
    };
    configFactory.async().then(function(d) {
        $scope.data = d;
        // this console log prints out the data that I am trying to access
        console.log($scope.data);
    });
    // this one prints out undefined
    console.log($scope.data);
}]);

所以基本上我可以访问用于检索它的函数中的数据，但不能访问它之外的数据。我可以用rootScope解决这个问题，但我试图避免这种情况，因为我认为它是一个绑带而不是一个合适的解决方案。

任何帮助都会很棒，但这是我第一次使用http.get和promises以及所有这些内容，所以非常感谢您的详细解释。

[编辑1 ]配置文件中的变量需要在Web应用程序中进行操作，因此我无法使用常量。

Answer 1

不要将响应数据分配给范围变量，在工厂本身创建属性，并在您的promise得到解决时将响应分配给控制器中的此属性。这样您将获得所有其他控制器中的值。

我已更新您的工厂和控制器，如下所示

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

    var configFactory = {
        async: function() {
            // $http returns a promise, which has a then function, which also returns a promise
            var promise = $http.get('assets/json/config.json').then(function(response) {
                // The then function here is an opportunity to modify the response
                console.log(response.data.config);
                // The return value gets picked up by the then in the controller.
                return response.data.config;
            });
            // Return the promise to the controller
            return promise;
        },
      config:'' // new proprety added
    };
    return configFactory;

}]);

    app.controller('footerController', ['$scope', '$rootScope', 'configFactory', function footerController($scope, $rootScope, configFactory) {
    var body = angular.element(window.document.body);
    $scope.onChange = function(state) {
        body.toggleClass('light');
    };
    configFactory.async().then(function(d) {
       // $scope.data = d;
         configFactory.config=d;
        // this console log prints out the data that I am trying to access
        console.log($scope.data);
    });
    // this one prints out undefined
    console.log($scope.data);
}]);

Answer 2

您是否考虑过使用角度常数？ http://ilikekillnerds.com/2014/11/constants-values-global-variables-in-angularjs-the-right-way/您可以将它们用作可从任何控制器访问的全局变量，而不会将值分配给rootScope

使工厂http.get的数据可供整个控制器AngularJS访问

2 个答案: