Question

假设我有以下指令：

angular
.module('app.widgets')
.directive('myCalendarRange', myCalendarRange);

function myCalendarRange () {
    var directive = {
      link: link,
      templateUrl: '/template/is/located/here.html',
      restrict: 'EA'
    };
    return directive;

    function link(scope, element, attrs) {
    /* */
    }
}

当Angular获取模板时，如何显示加载gif？

更新： 我也想要一个可以用于视图的解决方案。例如，当用户访问产品页面时，我想显示加载，而angular获取products.html

    $routeProvider
    .when('/Products', {
          templateUrl: 'products.html',
          controller: 'productsController',

    });

Answer 1

我刚刚以这种方式做到了......

在指令中输入一个HTML：

加载代码（并在加载模板时隐藏它）
模板包含（带有onload事件，角度支持）

将一个监视变量放入范围

中

angular
.module('app.widgets')
.directive('myCalendarRange', myCalendarRange);

function myCalendarRange () {
    var directive = {
      link: link,
      /* 1 and 2 */
      template: '<span ng-hide="loading == false">Loading... GIF</span><div ng-include="<url_template>" onload="loading = false"></div>',
      restrict: 'EA'
    };
    return directive;

    function link(scope, element, attrs) {
        scope.loading = true; //3
    }
}

使用这个想法，你可以在加载真实模板时使用带有加载gif的模板（我在服务器生成PayPal表单时使用它来显示加载）

对于你的例子：

$routeProvider
.when('/Products', {
      templateUrl: 'loading.html', //General loading with Gif and include
      controller: 'productsController',

});

loading.html

<div ng-hide="loading == false">
Loading please wait...<img src="ajax_loader_blue_64.gif" />
</div>
<div ng-include="url_template" onload="loading = false"></div>

的ProductsController

//...
scope.url_template = 'URL to template to load set in the controller'
scope.loading = true
//...

Answer 2

使用pace.js.它简单而且令人惊叹。

Angularjs - 在获取模板时显示加载

2 个答案: