Блог

Я пытаюсь создать общую загрузку, которая будет использоваться совместно с контроллерами. Итак, я создал службу, которая будет управлять состоянием скрытия / отображения:

 (function () {
    'use strict';

    var module = angular.module('main');
    var serviceId = "LoadingService";
    var ShowLoading = false;

    function LoadingService($rootScope) {

        function showLoading(value) {
            $rootScope.$broadcast(LOADING_CHANGED, value);
        }

        var service = {
            ShowLoading: showLoading
        }

        return service;
    }

    LoadingService.$inject = ['$rootScope'];
    module.service(serviceId, LoadingService);

}());
  

вот контроллер загрузки:

 (function () {
    'use strict';

    var app = angular.module("main");
    var controllerId = "rbLoading.controller";

    function loadingController($scope, LoadingService) {

        $scope.isLoading = false;

        $scope.$on(LOADING_CHANGED, function (event, data) {
            $scope.isLoading = data;
        });
    }

    app.controller(controllerId, loadingController);

    loadingController.$inject = ['$scope', 'LoadingService'];
}());
  

html:

 <div class="loading-panel" ng-if="isLoading">
    <!-- loading content-->

</div>
  

и директива:

 (function () {
    'use strict';
    var loadingDirective = function (OPTIMISATION) {
        return {
            restrict: 'E',
            templateUrl: function (element, attr) {
                return 'App/components/shared/loading/loading.html';
            },
            controller: 'rbLoading.controller',
            controllerAs: 'loading'
        };
    }
    var app = angular.module('main');
    loadingDirective.$inject = ["OPTIMISATION"];
    app.directive('rbLoading', loadingDirective);
}());
  

Когда я меняю значение LoadingService, оно запускает событие LOADING_CHANGED . Проблема в том, что ng-if работает не так, как ожидалось, хотя переменная данных имеет правильное значение. Чего мне не хватает?

Обновить

Переход на ng-show почти решает проблему. Для определенного сценария не работает. Я показываю загрузку, пытаясь определить местоположение пользователя с помощью API геолокации html5 и устанавливая тайм-аут после 10 секунд использования.

 setTimeout(function () {
                    console.log("timeout");
                    LoadingService.ShowLoading(false);
                    }, 10000);
  

эта функция setTimeout запускается, однако загрузка продолжает отображаться.