Question

假设此Loader服务：
的 HTML：

<div class="loader" ng-class="(loader) ? 'show' : 'hide'"></div>

的服务

app.service('Loader', function ($rootScope) {
  var _number = 0;
  this.reset = function () {
    $rootScope.loader = false;
    _number = 0;
    return this;
  };

  this.show = function () {
    _number++;
    $rootScope.loader = true;
    return this;
  };

  this.hide = function () {
    _number--;
    if (_number <= 0) {
      $rootScope.loader = false;
    }
    return this;
  };

});

将正在处理的请求数量考虑在内。
在收到回复之前调用Loader.show() $http并在收到回复后调用Loader.hide()作为加载程序服务正常工作但它只是一个全球装载机。
我需要显示loader元素：

在index.html内作为加载每个视图内容的全局加载器
提交活动的内部按钮
用于加载内容的弹出窗口

我正在寻找一种确定应该显示哪个加载器元素的好方法。

Answer 1

由于我没有得到答案，我自己想办法。我正在发布它，可能有些人需要它。
我将加载器分为两种类型，一个全局和一个特定的女巫接受一个元素作为参数。并添加一个类名“loading-icon”，以及一些用于不同类型输入的状态：

app.service('Loader', function ($rootScope) {
  var _number = 0;
  this.reset = function () {
  };

  this.gloabal = {};
  this.gloabal.show = function () {
  };
  this.gloabal.hide = function () {
  };

  this.particular = {};
  // target must be angular element or JS selected DOM element
  this.particular.show = function (target) {
    angular.element(target).addClass('loading');
  };
  this.particular.hide = function (target) {
   angular.element(target).removeClass('loading');
  };
});

样式：

.loading-icon:after
{
  content: '';
  display: inline-block;
  min-width: 20px;
  height: 20px;
  background: ('spinner.gif') no-repeat 0 0;
}

主叫：

var button = docuemnt.getElementById('submit-button');
Loader.particular.show(button);

或

Loader.global.show();

具有多种目标的加载器服务

1 个答案: