Javascript 如何从AngularJS应用程序中的控制器查看服务中的变量？

我正在编写应用程序功能，设置在学习目的中执行请求时加载gif。我使用AngularJS 1.4.5、Controller作为语法和John Papa风格的指南。 所以，我编写了一个拦截器，将当前请求的数量传递给服务：

(function () {
    'use strict';
    angular
        .module('eventApp')
        .factory('requestInterceptorService', requestInterceptorService);

    requestInterceptorService.$inject = ['$q', 'loadingService'];

    function requestInterceptorService($q, loadingService) {

        var numLoadings = 0; 
        var requestInterceptorServiceFactory = {
            request: request,
            response: response,
            responseError: responseError
        };
        return requestInterceptorServiceFactory;

        function request(config) {
            numLoadings++;
            loadingService.setLoaderStatus(numLoadings);
            return config || $q.when(config);
        }
        function response(response) {
            numLoadings--;
            loadingService.setLoaderStatus(numLoadings);
            return response || $q.when(response);

        }
        function responseError(response) {
            numLoadings--;
            loadingService.setLoaderStatus(numLoadings);
            return $q.reject(response);
        }
    }
})();

这是我的loading.service，带有isLoadgerEnabled标志，指示是否需要显示正在加载的图像：

(function () {
    'use strict';
    angular
        .module('eventApp')
        .factory('loadingService', loadingService);

    function loadingService() {

        var isLoaderEnabled = false;

        var loadingServiceFactory = {
            setLoaderStatus: setLoaderStatus,
            getLoaderStatus: getLoaderStatus,
            isLoaderEnabled: isLoaderEnabled
        };

        return loadingServiceFactory;

        function setLoaderStatus(numberOfRequests) {
            var status = false;
            if (numberOfRequests === 0) {
                status = false;
            }
            if (numberOfRequests !== 0) {
                status = true;
            }
            isLoaderEnabled = status;
        }

        function getLoaderStatus() {
            return isLoaderEnabled;
        }
    }
})();

以上代码适合我。 在视图中，我有一个带有加载图像和ng show指令的div，它侦听来自索引控制器的标志：

(function () {
'use strict';
angular
    .module('eventApp')
    .controller('indexController', indexController);

indexController.$inject = ['$location', 'authService', 'authModal', 'loadingService'];

function indexController($location, authService, authModal, loadingService) {
    /* jshint validthis: true*/
    var vm = this;
    vm.loading = false;            

    vm.loaderObserver = function () {
        vm.loading = loadingService.getLoaderStatus();
    }

    loadingService.register(vm.loaderObserver);

    //other unnecessary code
};
})();

我的问题：vm.isLoaderEnabled没有使用服务更新，实际上vm.isLoaderEnabled始终为false，我不确定问题出在哪里。 我想为这个功能写一个高效而优雅的解决方案，如果可能的话，也许没有$scope。

---

我已经准备好接受问题、重构建议或更好的想法，以便将数据绑定到视图

好的，我设法找到了解决问题的办法。 首先，我想指出loadingService中的代码部分：

var loadingServiceFactory = {
            setLoaderStatus: setLoaderStatus,
            getLoaderStatus: getLoaderStatus,
            isLoaderEnabled: isLoaderEnabled//<------1 line
        };

        return loadingServiceFactory;//<------2 line

加载控制器：

(function () {
'use strict';
angular
    .module('eventApp')
    .controller('indexController', indexController);

indexController.$inject = ['$location', 'authService', 'authModal', 'loadingService'];

function indexController($location, authService, authModal, loadingService) {
    /* jshint validthis: true*/
    var vm = this;
    vm.loading = false;            

    vm.loaderObserver = function () {
        vm.loading = loadingService.getLoaderStatus();
    }

    loadingService.register(vm.loaderObserver);

    //other unnecessary code
};
})();

装载机部

    <div id="loaderDiv" ng-show="index.loading" >
                    <img src="client/assets/img/loader.gif" class="content-loader" />
             </div>   

---

我希望这会对某些人有所帮助。

您可以在vm对象上公开loadingService，然后在html中显示do ng show=index.loadingService。isLoaderEnabled@JoseM可悲的是，这没有帮助。控制器中的isLoaderEnabled仅初始化一次，仅此而已

    <div id="loaderDiv" ng-show="index.loading" >
                    <img src="client/assets/img/loader.gif" class="content-loader" />
             </div>