1
coolicer OP angular.module('APP', [
'ngRoute', ... ]). config(function ($routeProvider, $locationProvider) { $routeProvider. when('/xxxx', {templateUrl: 'view/xxxx.html', controller: 'xxx'}); when('/xxxx', {templateUrl: 'view/xxxx.html', controller: 'xxx'}); $locationProvider.hashPrefix('!'); }).run(function(){ //run block }); 换个问法,如何在这些view切换中加入loading。 |
2
dingdong 2014-02-20 09:20:36 +08:00
<div ng-view>loading...</div>
|
3
ijse 2014-02-20 09:30:40 +08:00
ng加载完之前controller执行不了。
可以页面默认显示loading , 然后加载完执行controller时关掉 |
5
fansgentle 2014-02-20 09:33:19 +08:00 1
这是我的:
html: <img ngs-butterbar src="{% static 'ico/loading.gif' %}"> directive.js: directives.directive('ngsButterbar', ['$rootScope', function ($rootScope) { return { link: function (scope, element) { //attrs element.hide(); $rootScope.$on('$routeChangeStart', function () { element.show(); $('div[ng-view]').css('opacity', '0.5'); }); $rootScope.$on('$routeChangeSuccess', function () { element.hide(); $('div[ng-view]').css('opacity', '1'); }); } }; }] ); 具体参考 《用AngularJS开发下一代Web应用》 第 84 页 |
6
dingdong 2014-02-20 09:44:04 +08:00 1
@coolicer 在ng-view的tag中间啊,ng-view会把tag中的内容替换掉的,没加载完之前会显示tag中的内容,可以试试,不确定一定能解决你的问题
|
7
coolicer OP @fansgentle
是否routeChangeStart,routeChangeSuccess完了之后才执行link里面的操作。你这个方法看起来不错 |
10
whuhacker 2014-02-20 13:57:14 +08:00
/**
* Loading Indicator * * @author Maikel Daloo * @date 12th March 2013 * * Creates a new module and intercepts all ajax requests. * Every time a request is sent, we display the loading message and increment * the enable_counter variable. Then when requests complete (whether success or error) * we increment the disable_counter variable and we only hide the loading message * when the enable/disable counters are equal. * * @example * All that is required to get this working is to inject this module into your main * module. E.g. * var app = angular.module('my-app', ['LoadingIndicator']); * Then the script will look for the element specified in the LoadingIndicatorHandler object * and show/hide it. */ var module = angular.module('LoadingIndicator', []); module.config(['$httpProvider', function($httpProvider) { var interceptor = ['$q', 'LoadingIndicatorHandler', function($q, LoadingIndicatorHandler) { return function(promise) { LoadingIndicatorHandler.enable(); return promise.then( function( response ) { LoadingIndicatorHandler.disable(); return response; }, function( response ) { LoadingIndicatorHandler.disable(); // Reject the reponse so that angular isn't waiting for a response. return $q.reject( response ); } ); }; }]; $httpProvider.responseInterceptors.push(interceptor); }]); /** * LoadingIndicatorHandler object to show a loading animation while we load the next page or wait * for a request to finish. */ module.factory('LoadingIndicatorHandler', function() { // The element we want to show/hide. var $element = $('#loading-indicator'); return { // Counters to keep track of how many requests are sent and to know // when to hide the loading element. enable_count: 0, disable_count: 0, /** * Fade the blocker in to block the screen. * * @return {void} */ enable: function() { this.enable_count++; if ( $element.length ) $element.show(); }, /** * Fade the blocker out to unblock the screen. * * @return {void} */ disable: function() { this.disable_count++; if ( this.enable_count == this.disable_count ) { if ( $element.length ) $element.hide(); } } } }); |
11
atian25 2014-02-20 14:01:04 +08:00
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak
{ display: none; } #splash-page.ng-cloak /*<-- This has higher specificity so it can display a splash screen*/ { display: block; } |