ng-show attribut verursacht HTML-Block blinkend (Anfänger)

Question

Auf meiner Login-Seite, wenn ich falsche Anmeldeinformationen (Login/Pass) eingeben, wird eine Fehlermeldung in rot angezeigt.

In login.html:

<div class="alert alert-danger" ng-show="authenticationError" 
       translate="login.messages.error.authentication"> 
       <strong></strong> 
      </div> 

Wenn ich gesetzt ng-show="true" hiermit ausdrücklich, die Meldung auf dem Bildschirm persistent ist; (glücklicherweise). Das Problem kommt, wenn ng-show dynamisch ist (mit authenticationError Variable)

Wenn diese Variable auf true gesetzt ist, dann wird die Fehlermeldung angezeigt wird, aber links 1 Sekunde auf dem Bildschirm und dann verschwinden.

Hinter den Kulissen (Controller + Service):

login.controller.js:

$scope.login = function() { 

      // event.preventDefault(); 
      Auth.login({ 
       username: $scope.username, 
       password: $scope.password, 
       rememberMe: $scope.rememberMe 
      }).then(function() { 
       $scope.authenticationError = false; 
       // if() 
       if ($rootScope.previousStateName === 'register') { 
        $state.go('home'); 
       } else { 
        $rootScope.back(); 
       } 
      }).catch(function() { 
       $scope.authenticationError = true; 
      }); 
     }; 

auth.service.js:

angular.module('tessicommunicationApp') 
    .factory('Auth', function Auth($rootScope, $state, $q, $translate, Principal, AuthServerProvider, Account, Register, Activate, Password, PasswordResetInit, PasswordResetFinish) { 
     return { 
      login: function (credentials, callback) { 
       var cb = callback || angular.noop; 
       var deferred = $q.defer(); 
       console.log("login ..."); 
       AuthServerProvider.login(credentials).then(function (data) { 
        // retrieve the logged account information 
        Principal.identity(true).then(function(account) { 
         // After the login the language will be changed to 
         // the language selected by the user during his registration 
         $translate.use(account.langKey).then(function(){ 
          $translate.refresh(); 
         }); 
         deferred.resolve(data); 
        }); 
        return cb(); 
       }).catch(function (err) { 
        this.logout(); 
        deferred.reject(err); 
        console.log("erreur login !"); 
        return cb(err); 
       }.bind(this)); 

       return deferred.promise; 
      }, 

auth. session.service.js:

angular 
     .module('tessicommunicationApp') 
     .factory(
       'AuthServerProvider', 
       function loginService($http, localStorageService, $window, $state, $cookies) { 
        return { 
         login : function(credentials) { 
          var data = 'j_username=' 
            + encodeURIComponent(credentials.username) 
            + '&j_password=' 
            + encodeURIComponent(credentials.password) 
            + '&remember-me=' + credentials.rememberMe 
            + '&submit=Login'; 
          return $http 
            .post(
              'api/authentication', 
              data, 
              { 
               headers : { 
                'Content-Type' : 'application/x-www-form-urlencoded' 
               } 
              }).success(function(response) { 
             return response; 
            }); 
         }, 

Sagen Sie mir, wenn Sie mehr Code benötigen.

Der Kontext ist:

1) Ich brauche dieses Ticket zu debuggen.

2) Ich habe nichts von diesem Web-Anwendungs-Code (insbesondere Front-End-Teil)

3) Ich habe fast keine Kenntnisse in AngularJS (Theorie nur ein wenig).

Ich wünschen Sie werden mir helfen, mein erstes Ticket zu lösen.) *

Answer 1

Werden Sie nicht eine Klammer und zusätzliche Klammer am Ende der Erklärung hier fehlen:

}).catch(function (err) { 
        this.logout(); 
        deferred.reject(err); 
        console.log("erreur login !"); 
        return cb(err); 
       }.bind(this));// <-- missing parenthesis 

Es soll wie:

}).catch(function (err) { 
         this.logout(); 
         deferred.reject(err); 
         console.log("erreur login !"); 
         return cb(err); 
        }).bind(this); 

Etwas anderes Sie, wenn verdächtige über Änderungen auftreten können versuchen, ohne dass Sie wissen, ist die variable Änderung Überwachung mit einem $watch wie:

$scope.countChange = 0; 

$scope.$watch('authenticationError', function(newValue, oldValue) { 
    $scope.countChange = $scope.countChange + 1; 
    console.log('Change count :',$scope.countChange , ' New Value =', newValue); 
});