Angular ui Grid如何显示加载程序

Question

我想知道如何在加载数据之前显示一个简单的加载器。我正在使用ng-grid-1.3.2，正在使用Google搜索，但是没有找到任何示例。再见

Answer 1

像Maxim Shoustin建议的那样，您可以使用JimLavin的angularjs-spinner，后者使用（ 已弃用的）响应拦截器。

我认为这是最好的解释：http :
//codingsmackdown.tv/blog/2013/04/20/using-response-interceptors-to-show-and-
hide-a-loading-widget-redux/

简而言之，在他的第一个解决方案中，您为ng-grid应用程序要做的是：

1 ）将加载的gif添加到您的html中（有关加载gif的信息，请点击此处）

<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 ）在声明了应用程序级别模块后，立即在代码中将http请求的响应拦截器添加到配置块中

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指令

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();});
    }
 };
}]);

在codingsmackdown上查看更多详细信息