@66pix/angular-busy 中文文档教程

发布于 8年前 浏览 20 项目主页 更新于 3年前

angular-busy Build Status

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

Demo

现场演示

Getting Started

使用 Bower 安装或直接从存储库的 dist 文件夹下载文件。

bower install angular-busy --save

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

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

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

将您的承诺添加到 $scope 并在 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();

}
<!-- Use the simple syntax -->
<div cg-busy="myPromise"></div>

<!-- Use the advanced syntax -->
<div cg-busy="{promise:myPromise,message:'Loading Your Data',templateUrl:'mycustomtemplate.html'}"></div>

Options

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

换句话说。 你可以这样做:

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

或者这样:

<div cg-busy="{promise:myPromise,message:'Loading',backdrop:false,templateUrl:'myAwesomeTemplate.html',delay:300,minDuration:700}"></div>
  • promise - Required. The promise (or array of promises) that will cause the busy indicator to show.
  • message - Optional. Defaults to 'Please Wait…'. The message to show in the indicator. This value may be updated while the promise is active. The indicator will reflect the updated values as they're changed.
  • backdrop - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.
  • templateUrl - Optional. If provided, the given template will be shown in place of the default progress indicatory template.
  • delay - Optional. The amount of time to wait until showing the indicator. Defaults to 0. Specified in milliseconds.
  • minDuration - Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker. Defaults to 0. Specified in milliseconds.
  • wrapperClass - Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy sign/animation. Defaults to cg-busy cg-busy-animation. Typically only useful if you wish to apply different positioning to the animation.

Providing Custom Templates

angular-busy 指示器是一个常规的 Angular 模板。 模板可以访问声明 cg-busy 的范围,因此您可以在自定义模板中引用本地范围变量。 此外,该范围还增加了一个包含指示器消息文本的 $message 字段。

Overriding Defaults

messagebackdroptemplateUrldelayminDuration 的默认值可能所有这些都可以通过覆盖 cgBusyDefaults$injector 值来覆盖,就像这样:

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'
});

只需要指定您想要覆盖的值。

Release History

  • v4.1.3 - Fix for issue #45 and issue #49.
  • v4.1.2 - Small bugs fixed, wrapperClass option added.
  • v4.1.1 - Compatibility with Angular 1.3.
  • v4.1.0
  • Change to how delay and minDuration work together. If specified together, minDuration will only take effect if the promise was active through the delay. For example, if delay=200 and minDuration=500 and the actual promise only took 100ms, no indicator will be shown. If the delay threshold is reached, the indicator will show for minDuration ms rather than minDuration minus delay as it had been before.
  • Backdrop now fades in with no movement. Message still animates in from the top.
  • v4.0.4 - Added bower_components to bower ignore.
  • v4.0.3 - Now supports Q promises.
  • v4.0.2 - Fix for min duration only being used when delay also being set.
  • v4.0.0 - Big update
  • Dependency on angular-promise-tracker has been removed. We now track promises directly.
  • Message is now configurable.
  • The template options is now templateUrl.
  • The delay option has been added.
  • The minDuration option has been added.
  • Changing default template has been modified to be part of the new cgBusyDefaults value.
  • v3.0.2 - Reverting back to promise-tracker v1.5 due to changes in the api.
  • v3.0.1 - Fix for using cg-busy when a tracker has already been registered.
  • v3.0.0 - Support for new promise-tracker api. Fix for multiple cg-busy's on the same scope.
  • v2.2.0 - Support for multiple trackers per indicator.
  • v2.1.0 - Removed work-around for issues in Angular 1.2-rc's.
  • v2.0.0 - Moved to Angular 1.2.0-rc1.
  • v1.0.0 - Added Bower support.
  • v0.1.1 - Updated to Angular 1.1.5 animation syntax.
  • v0.1.0 - Initial release.

angular-busy Build Status

Show busy/loading indicators on any $http or $resource request, or on any promise.

Demo

Live Demo

Getting Started

Install with Bower or download the files directly from the dist folder in the repo.

bower install angular-busy --save

Add dist/angular-busy.js and dist/angular-busy.css to your index.html.

Add cgBusy as a module dependency for your module.

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

Add your promise to $scope and reference that in the cg-busy directive:

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

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

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

}
<!-- Use the simple syntax -->
<div cg-busy="myPromise"></div>

<!-- Use the advanced syntax -->
<div cg-busy="{promise:myPromise,message:'Loading Your Data',templateUrl:'mycustomtemplate.html'}"></div>

Options

The cg-busy directive expects either a promise or a configuration object.

In other words. You may do this:

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

or this:

<div cg-busy="{promise:myPromise,message:'Loading',backdrop:false,templateUrl:'myAwesomeTemplate.html',delay:300,minDuration:700}"></div>
  • promise - Required. The promise (or array of promises) that will cause the busy indicator to show.
  • message - Optional. Defaults to 'Please Wait…'. The message to show in the indicator. This value may be updated while the promise is active. The indicator will reflect the updated values as they're changed.
  • backdrop - Optional. Boolean, default is true. If true a faded backdrop will be shown behind the progress indicator.
  • templateUrl - Optional. If provided, the given template will be shown in place of the default progress indicatory template.
  • delay - Optional. The amount of time to wait until showing the indicator. Defaults to 0. Specified in milliseconds.
  • minDuration - Optional. The amount of time to keep the indicator showing even if the promise was resolved quicker. Defaults to 0. Specified in milliseconds.
  • wrapperClass - Optional. The name(s) of the CSS classes to be applied to the wrapper element of the busy sign/animation. Defaults to cg-busy cg-busy-animation. Typically only useful if you wish to apply different positioning to the animation.

Providing Custom Templates

The angular-busy indicator is a regular Angular template. The templates have access to the scope where cg-busy was declared so you may reference your local scope variables in your custom templates. Additionally, the scope is augmented with a $message field containing the indicator message text.

Overriding Defaults

The defaut values for message, backdrop, templateUrl, delay, and minDuration may all be overriden by overriding the $injector value for cgBusyDefaults, like so:

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'
});

Only the values you'd like overriden need to be specified.

Release History

  • v4.1.3 - Fix for issue #45 and issue #49.
  • v4.1.2 - Small bugs fixed, wrapperClass option added.
  • v4.1.1 - Compatibility with Angular 1.3.
  • v4.1.0
  • Change to how delay and minDuration work together. If specified together, minDuration will only take effect if the promise was active through the delay. For example, if delay=200 and minDuration=500 and the actual promise only took 100ms, no indicator will be shown. If the delay threshold is reached, the indicator will show for minDuration ms rather than minDuration minus delay as it had been before.
  • Backdrop now fades in with no movement. Message still animates in from the top.
  • v4.0.4 - Added bower_components to bower ignore.
  • v4.0.3 - Now supports Q promises.
  • v4.0.2 - Fix for min duration only being used when delay also being set.
  • v4.0.0 - Big update
  • Dependency on angular-promise-tracker has been removed. We now track promises directly.
  • Message is now configurable.
  • The template options is now templateUrl.
  • The delay option has been added.
  • The minDuration option has been added.
  • Changing default template has been modified to be part of the new cgBusyDefaults value.
  • v3.0.2 - Reverting back to promise-tracker v1.5 due to changes in the api.
  • v3.0.1 - Fix for using cg-busy when a tracker has already been registered.
  • v3.0.0 - Support for new promise-tracker api. Fix for multiple cg-busy's on the same scope.
  • v2.2.0 - Support for multiple trackers per indicator.
  • v2.1.0 - Removed work-around for issues in Angular 1.2-rc's.
  • v2.0.0 - Moved to Angular 1.2.0-rc1.
  • v1.0.0 - Added Bower support.
  • v0.1.1 - Updated to Angular 1.1.5 animation syntax.
  • v0.1.0 - Initial release.
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文