微调器没有出现

Question

对于每个 HTTP 调用，我们都有角度应用程序和微调器（以指示用户等待 API 响应）。

var reportApp = angular.module('reportApp', ['ui.bootstrap', 'ngSanitize']);


reportApp.directive('loading', ['$http', function ($http) {
    return {
        restrict: 'A',
        template: '<div id="status" class="modal show fade" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false"><div><div><h4 id="statusLabel">Please wait...</h4></div> <div class="spinner" style="text-align: center;" tabindex="-1"><img style="width:80px" src="/Content/images/loading_spinner.gif" /></div></div></div>',
        link: function (scope, elm, attrs) {
            scope.isLoading = function () {
                return $http.pendingRequests.length > 0;
            };
            scope.$watch(scope.isLoading, function (v) {
                if (v) {
                    elm.show();
                } else {
                    elm.hide();
                }
            });
        }
    };
}]);


reportApp.controller('ReportController', ['$scope', '$http', '$sanitize', function ($scope, $http, $sanitize) {
...
...
}

如果我们删除了应用类，即 class="modal show fade"，只会出现一个带有微调器的对话框。

任何线索？