Using AngularJS with block-ui and routeProvider, page displays “Loading …” after page load is complete

It's my first time using routeProvider with angular js. The project has two pages so far: home and user. Both pages load completely and interact with their controllers correctly. However, the text "Loading ..." appears at the bottom of both pages.

[NOTE: I previously reported that the "Loading ..." text was only appearing on one of the pages. But it actually appears on both pages.]

Of course, having "Loading ..." on the page is completely unacceptable, but I have no idea why it's there. Here's the HTML that angular has inserted into the page:

<div block-ui-container="" class="block-ui-container ng-scope">
  <div class="block-ui-overlay"></div>
  <div class="block-ui-message-container" aria-live="assertive" aria-atomic="true">
    <div class="block-ui-message ng-binding" ng-class="$_blockUiMessageClass">Loading ...</div>

And here is the routeProviderCode:

var projectApp = angular.module("mainProjectModule",
    ['ngRoute', 'blockUI', 'ngSanitize', 'ui.bootstrap']);

function resolver(path) {
    return {
        resolver: ['$q','$rootScope',
            function($q, $rootScope) {
                var deferred = $q.defer();
                require([path], function() {
                    $rootScope.$apply( function() {
                return deferred.promise;

    function($routeProvider) {
        var pageNames = [ 'home', 'user' ];
        pageNames.forEach( function(pageName) {
                .when('/'+pageName, {
                    templateUrl:   '/project/ajs/'+pageName+'.html',
                    resolve:       resolver(pageName+'Controller')
        $routeProvider.otherwise({redirectTo: '/home'});

// Bootstrap Angular when DOM is ready

Is there some kind of signalling mechanism that my controller should be using to clear this string?



Answering my own question here, and it's more of a work-around than a real answer. I would still appreciate knowing the correct way to resolve this issue.

I started the project with a template that included angular-block-ui (see It appears this block-ui is being invoked behind-the-scene when the route provider loads the template (see the original route provider code above). I'm not 100% certain because the "Loading ..." message is not actually blocking anything, but it is the sort of default blocking message I might expect to see while loading a template. The invocation is outside my control (as far as I can tell), so without debug-stepping into the angular-js code (no thanks!) it's not clear what is happening or why.

The angular-block-ui web site says that you can stop the blocking with this call:


I added this code to my controller and it had no effect.

So the workaround is that I've added a directive to the project's css file to hide the message like this:

.block-ui-overlay + .block-ui-message-container {

Obviously this is a hack, but it's simple and effective.


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.