AngularJS路由之ui-router(三)
发布时间:2020-12-17 09:44:53 所属栏目:安全 来源:网络整理
导读:一、为ui-router添加进度条 在使用动态控制器或者ajax,添加数据的时候需要进度条提示, 我们可以使用路由状态的事件添加全局进度条提示 $stateChangeStart : 当状态开始改变时触发 $stateChangeSuccess : 当状态改变结束时触发 二、实例1,创建一个进度条指
一、为ui-router添加进度条 在使用动态控制器或者ajax,添加数据的时候需要进度条提示, 我们可以使用路由状态的事件添加全局进度条提示 $stateChangeStart: 当状态开始改变时触发 $stateChangeSuccess: 当状态改变结束时触发 二、实例1,创建一个进度条指令 // Route State Load Spinner(used on page or content load) MetronicApp.directive('ngSpinnerBar',['$rootScope','$state',function($rootScope,$state) { return { link: function(scope,element,attrs) { // by defult hide the spinner bar element.addClass('hide'); // hide spinner bar by default // display the spinner bar whenever the route changes(the content part started loading) $rootScope.$on('$stateChangeStart',function() { element.removeClass('hide'); // show spinner bar }); // hide the spinner bar on rounte change success(after the content loaded) $rootScope.$on('$stateChangeSuccess',function() { element.addClass('hide'); // hide spinner bar $('body').removeClass('page-on-load'); // remove page loading indicator Layout.setAngularJsSidebarMenuActiveLink('match',null,$state); // activate selected link in the sidebar menu // auto scorll to page top setTimeout(function () { App.scrollTop(); // scroll to the top on content load },$rootScope.settings.layout.pageAutoScrollOnLoad); }); // handle errors $rootScope.$on('$stateNotFound',function() { element.addClass('hide'); // hide spinner bar }); // handle errors $rootScope.$on('$stateChangeError',function() { element.addClass('hide'); // hide spinner bar }); } }; } ]) 更多: AngularJS路由之ui-router(二) AngularJS路由之ui-router(一) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |