Question

我想在JS做某事时向用户显示加载gif。

在我开始之前，我想说我发现了很多关于这个主题的文章，但没有人帮助过我。

我发现多个使用拦截器（例如this或this）
还发现了一些单控制器/指令（例如this）

我想要的是什么： 我想做一些更复杂的事情。因此，任何控制器或任何指令都可以访问更改加载状态并显示它。

我尝试了什么：

我首先制作一个LoadingService，以便随时随地访问更改状态：

myApp.service('LoadingService', ['$timeout', function($timeout) {
        var loading = false;

        this.isLoading = function() {
            return loading;
        };

        this.stopLoading = function() {
            // loading will be visible at least 1s
            $timeout(function () {
                loading = false;
                console.log(loading);
            }, 1000);
        };

        this.startLoading = function() {
            loading = true;
            console.log(loading);
        }
}]);

之后我创建了一个HeaderCtrl，我想在默认情况下显示加载gif：

myApp.controller('headerCtrl', ['$scope', 'LoadingService', function ($scope, LoadingService) {
    $scope.isLoading = LoadingService.isLoading();
}]);

然后在我的另一个控制器中，我尝试启动并停止

LoadingService.startLoading();
// Some code between
LoadingService.stopLoading();

实际发生了什么：

更具体的说，加载的价值从false更改为true，然后又回到false，但图片未显示。

示例： 我知道这可能是一个相当复杂的问题所以我创建了一个实例，可以在这里找到：http://plnkr.co/edit/43HdyLBB9ri0s6yQbJ8X?p=preview

感谢您的任何建议。

Answer 1

不是将isLoading的值设置为scope.isLoading，而是设置函数本身。然后在模板中调用它。

Example

myApp.directive("loader", ['LoadingService', function(LoadingService) {
    return {
        restrict: "E",
        // templateUrl: 'src/templates/loader.html',
        template: '<div ng-if="isLoading()">LOADER</div>',
        link: function(scope) {
          scope.isLoading = LoadingService.isLoading;
        }
    }

页面工作时加载gif

1 个答案: