我想知道如何在加载数据之前显示一个简单的加载程序。 我正在使用 ng-grid-1.3.2 我正在谷歌搜索,但没有找到任何示例。 再见
最佳答案
喜欢Maxim Shoustin建议您可以使用 Jim Lavin 中的 angularjs-spinner它使用(已弃用)Response Interceptors .
简而言之,在他的第一个解决方案中,你必须为你的 ng-grid 应用程序做的是:
1) 将加载 gif 添加到您的 html(加载 gif 查看 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) 在您声明应用级模块后,立即在您的代码中将 http 请求的响应拦截器添加到配置 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指令
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
关于javascript - Angular ui网格如何显示加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18743656/