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

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？

更新:我还想要一个可用于 View 的解决方案。例如，当用户转到产品页面时，我想在 Angular 获取 products.html 时显示加载

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

    });

Answer 1

我就是这样做的...

在指令中放置一个 HTML:

1. 加载代码(并在加载模板时隐藏它)
2. 模板包含(带有onload事件，Angular支持)

3. 放置一个监视变量以在您的作用域中加载

   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',

});

正在加载.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>

产品 Controller

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