本文共 1860 字,大约阅读时间需要 6 分钟。
一、为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 }); } }; }])更多:
转载地址:http://kjogi.baihongyu.com/