本文主要是介绍AngularJS路由之ui-router（三），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、为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 barelement.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 indicatorLayout.setAngularJsSidebarMenuActiveLink('match', null, $state); // activate selected link in the sidebar menu// auto scorll to page topsetTimeout(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（一）
这篇关于AngularJS路由之ui-router（三）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
