角UI电网如何展示装载机 [英] Angular ui grid how to show a loader

问题描述

我不知道如何表达一个简单的装载器装载数据之前。
我使用的是NG-网格1.3.2
我在谷歌上搜索，但我没有找到任何的例子。
再见

I'm wondering how to show a simple loader before data was loaded. I'm using ng-grid-1.3.2 I'm googling but I didn't find any example. Bye

推荐答案

如马克西姆Shoustin 建议您可以使用angularjs微调从吉姆·拉文它使用（德precated 的）的Response拦截的。

like Maxim Shoustin suggested you can use the angularjs-spinner from Jim Lavin which uses (deprecated) Response Interceptors.

我认为这是最好的解释在这里：
<一href=\"http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/\">http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/

I think it's explained best here : http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/

在简单地说，在他的第一个解决方案，你有你的NG-电网应用做的是：

In a nutshell, in his first solution, what you have to do for your ng-grid app is:

1 ）的加载GIF添加到您的HTML（，用于加载GIF看看这里 的）

1) Add the loading gif to your html (for loading gif look here)

<div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;" loading-widget >
    <div class="loadingContent">
        <p>
            <img alt="Loading  Content" src="images/ajax-loader.gif" /> Loading
        </p>
    </div>
</div>

2 ）在你的code，只要你声明了应用级模块添加响应拦截HTTP请求到配置块

2) In your code as soon as you have declared your app level module add the Response Interceptors for http requests to the configuration block

var app = angular.module('myCoolGridApp', ['ngGrid']);

app.constant('_START_REQUEST_', '_START_REQUEST_');
app.constant('_END_REQUEST_', '_END_REQUEST_');
app.config(['$httpProvider', '_START_REQUEST_', '_END_REQUEST_', function ($httpProvider, _START_REQUEST_, _END_REQUEST_) {
    var $http,
     interceptor = /* see extra details on codingsmackdown.tv */
    $httpProvider.responseInterceptors.push(interceptor); 
}

3 ），然后添加你的loadingWidget指令

3) and then add your loadingWidget directive

app.directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {
return {
    restrict: "A",
    link: function (scope, element) {
        element.hide();
        scope.$on(_START_REQUEST_, function () {element.show();});
        scope.$on(_END_REQUEST_, function () {element.hide();});
    }
 };
}]);

查看更多详细信息，在<一个href=\"http://codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-hide-a-loading-widget-redux/\">codingsmackdown

这篇关于角UI电网如何展示装载机的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！