Wenn Sie AngularJS mit block-ui und routeProvider verwenden, wird auf der Seite nach dem Laden der Seite "Loading ..." angezeigt.

Question

Es ist das erste Mal, dass ich routeProvider mit eckigen js verwende. Das Projekt hat bisher zwei Seiten: home und user. Beide Seiten laden vollständig und interagieren mit ihren Controllern korrekt. Der Text "Laden ..." wird jedoch am unteren Rand beider Seiten angezeigt.

[HINWEIS: Ich habe bereits berichtet, dass der Text "Laden ..." nur auf einer der Seiten angezeigt wurde. Aber es erscheint tatsächlich auf beiden Seiten.]

Natürlich ist es völlig inakzeptabel, "Loading ..." auf der Seite zu haben, aber ich habe keine Ahnung, warum es da ist. Hier ist der HTML-Code, Winkel hat in die Seite eingefügt:

<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> 

Und hier ist der 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); 

Gibt es irgendeine Art von Signalmechanismus, der mein Controller diese Zeichenfolge zu löschen verwenden sollten?

Answer 1

Meine eigene Frage hier beantworten, und es ist eher eine Umgehungslösung als eine echte Antwort. Ich würde es trotzdem schätzen zu wissen, wie dieser Fehler behoben werden kann.

Ich startete das Projekt mit einer Vorlage, die angle-block-ui enthielt (siehe https://github.com/McNull/angular-block-ui). Es scheint, dass dieser Block-u im Hintergrund aufgerufen wird, wenn der Routenanbieter die Vorlage lädt (siehe oben den ursprünglichen Routenanbieter-Code). Ich bin nicht 100% sicher, weil die Meldung "Loading ..." nichts blockiert, aber es ist die Art von Standard-Blockierungsnachricht, die ich beim Laden einer Vorlage erwarten würde. Der Aufruf ist außerhalb meiner Kontrolle (soweit ich das beurteilen kann), also ohne Debug-Einstieg in den angular-js-Code (nein danke!) Ist nicht klar, was passiert oder warum.

Die Winkelblock-ui-Website sagt, dass Sie die Blockierung mit diesem Aufruf stoppen:

blockUI.stop(); 

ich diesen Code zu meinem Controller hinzugefügt und es hatte keine Wirkung

.

So ist die Problemumgehung, dass ich eine Richtlinie des Projekts CSS-Datei zu verstecken die Meldung wie diese haben hinzugefügt:

.block-ui-overlay + .block-ui-message-container { 
    display:none; 
} 

Offensichtlich ist dies ein Hack ist, aber es ist einfach und effektiv.