AngularJS ng include partial在$http拦截器中不可用

AngularJS ng-include partial not available in $http interceptor

本文关键字：http include ng partial AngularJS      更新时间：2023-09-26

我正试图在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>

ng-include将执行您想要的操作，但您需要向src-<ng-include src="'loading.html'" ></ng-include> 添加额外的引号

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

相关文章：