angular-busy用法

　

busy

angular-busy 

在任何$ http或$资源请求或任何承诺上显示繁忙/加载指示符。

演示

现场演示

入门

用Bower，npm，yarn安装，或者直接从repo的dist文件夹下载文件。

bower install angular-busy --save
npm install @cgross/angular-busy

添加dist/angular-busy.js并添加dist/angular-busy.css到您的index.html。

添加cgBusy为模块的模块依赖项。

angular.module('your_APP', ['cgBusy']);

将您的承诺添加到$范围并在cg-busy指令中引用：

function MyCtrl($scope,$http,User) {

  //using $http
  $scope.myPromise = $http.get('...');

  //if you have a User class based on $resource
  $scope.myPromise = User.$save();

}

<！ -使用简单的语法- > 

<p cg-busy="myPromise"></p>

<！ -使用高级语法- >

<p cg-busy="{promise:myPromise,message:'Loading Your Data',templateUrl:'mycustomtemplate.html'}"></p>

选项

该cg-busy指令需要承诺或配置对象。

换一种说法。你可以这样做：

<p cg-busy="myPromise"></p>

或这个：

<p cg-busy="{promise:myPromise,message:'Loading',backdrop:false,templateUrl:'myAwesomeTemplate.html',delay:300,minDuration:700}"></p>

• promise - 必需。承诺（或承诺数组）将导致繁忙指标显示。
• message- 可选的。默认为'请稍等...'。要在指标中显示的消息。在承诺处于活动状态时，此值可能会更新。指标将在更改后反映更新的值。
• backdrop- 可选的。布尔值，默认值为true。如果为true，则会在进度指示符后面显示淡入淡出的背景。
• templateUrl- 可选的。如果提供，则将显示给定的模板来代替默认的进度指示模板。
• delay- 可选的。等待显示指标的时间。默认值为0.以毫秒为单位指定。
• minDuration- 可选的。即使承诺更快解决，保持指标显示的时间也很长。默认值为0.以毫秒为单位指定。
• wrapperClass- 可选的。要应用于繁忙标志/动画的包装器元素的CSS类的名称。默认为cg-busy cg-busy-animation。通常只在您希望对动画应用不同的定位时才有用。

提供自定义模板

角度繁忙指标是一个常规的Angular模板。模板可以访问cg-busy声明的范围，以便您可以在自定义模板中引用本地范围变量。此外，该范围增加了$message包含指标消息文本的字段。

覆盖默认值

为defaut值message，backdrop，templateUrl，delay，和minDuration可全部通过重写将覆盖$injector值cgBusyDefaults，如下所示：

angular.module('your_app').value('cgBusyDefaults',{
  message:'Loading Stuff',
  backdrop: false,
  templateUrl: 'my_custom_template.html',
  delay: 300,
  minDuration: 700,
  wrapperClass: 'my-class my-class2'
});

只有你想要重写的值需要被指定。

相关阅读