Angular ui grid 如何显示加载器 [英] Angular ui grid how to show a loader
问题描述
我想知道如何在加载数据之前显示一个简单的加载器.我正在使用 ng-grid-1.3.2我在谷歌上搜索,但我没有找到任何例子.再见
like Maxim Shoustin 建议您可以使用 angularjs-spinner来自 Jim Lavin 使用(已弃用)响应拦截器.
简而言之,在他的第一个解决方案中,你必须为你的 ng-grid 应用程序做的是:
1) 将加载 gif 添加到您的 html(加载 gif 查看 此处)
<div id="loadingWidget" class="row-fluid ui-corner-all" style="padding: 0 .7em;"加载小部件 ><div class="loadingContent"><p><img alt="加载内容" src="images/ajax-loader.gif"/>加载中</p>
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_', 函数 ($httpProvider, _START_REQUEST_, _END_REQUEST_) {变量 $http,拦截器 =/* 查看关于 codingsmackdown.tv 的额外细节 */$httpProvider.responseInterceptors.push(interceptor);}
3) 然后添加你的 loadingWidget 指令
app.directive('loadingWidget', ['_START_REQUEST_', '_END_REQUEST_', function (_START_REQUEST_, _END_REQUEST_) {返回 {限制:A",链接:功能(范围,元素){元素.hide();scope.$on(_START_REQUEST_, function () {element.show();});scope.$on(_END_REQUEST_, function () {element.hide();});}};}]);
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
like Maxim Shoustin suggested you can use the angularjs-spinner from Jim Lavin which uses (deprecated) Response Interceptors.
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/
In a nutshell, in his first solution, what you have to do for your ng-grid app is:
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) 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) 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();});
}
};
}]);
See more details at codingsmackdown
这篇关于Angular ui grid 如何显示加载器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!