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>
  </div>
</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() {
                        deferred.resolve();
                    });
                });
                return deferred.promise;
            }
        ]
    }
}

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

// Bootstrap Angular when DOM is ready
angularAMD.bootstrap(projectApp);

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

Answers:

Answer

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 https://github.com/McNull/angular-block-ui). 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:

blockUI.stop();

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 {
  display:none;
}

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.