AngularJS ng-include部分在$ http拦截器中不可用

Question

当我在AngularJS应用程序中加载ajax内容时，我试图显示一个加载ajax的gif显示。

我已经使用下面的代码进行了所有工作。 我的问题是我必须在所有页面上复制并粘贴#loadingWidget标记。 我希望能够只包含部分内容。 我尝试使用ng-include ，但是在拦截器运行时似乎没有加载包含ng的html页面。

有没有其他方法可以包含此部分内容而不必将相同的html标记复制并粘贴到每个页面中？

// Module for the rest of the pages
var myapp = angular.module('myapp ', []);

// Set some configs
myapp .config(function($httpProvider) {

    // This loads the ajax loading image when necessary
    var $http,
        interceptor = ['$q', '$injector', function ($q, $injector) {
            var error;

            function success(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return response;
            }

            function error(response) {
                // get $http via $injector because of circular dependency problem
                $http = $http || $injector.get('$http');
                if($http.pendingRequests.length < 1) {
                    $('#loadingWidget').hide();
                }
                return $q.reject(response);
            }

            return function (promise) {
                $('#loadingWidget').show();
                return promise.then(success, error);
            }
        }];

    $httpProvider.responseInterceptors.push(interceptor);
});

目前，我必须在每个页面中都包含此内容

<div class="modal" id="loadingWidget" style="position:absolute; top: 45%;" >
        <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-body">
                <div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;">
                    <div class="loadingContent">
                        <p>
                            <img alt="Content" src="images/ajax-loading.gif" /> Thinking
                        </p>
                    </div>
                </div>
              </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

我希望能够在所有页面中添加此内容，但是添加此内容时什么也没有发生

<ng-include src="loading.html" ></ng-include>

Answer 1

ng-include将满足您的要求，但是您需要在src中添加额外的引号- <ng-include src="'loading.html'" ></ng-include>

如果那不起作用，请查看浏览器开发工具中的“网络”选项卡，以查看它是否确实在正确加载页面，或者是否需要更改路径。 该路径是相对于主页的。