angular ng-show работает только при переходе в окно

Question

На главной странице входа моего углового приложения Я пытаюсь отобразить сообщение об ошибке, когда пользователь пытается ввести неверную комбинацию имени пользователя и пароля. По какой-то причине сообщение об ошибке ng-show будет отображаться только в том случае, если я на мгновение перейду от открытой страницы в браузере, а затем вернусь. Например, если я попал в submit с недопустимым паролем имени пользователя/пароля, ничего не произойдет, пока я не переключусь на возвышенную (или любую другую открытую программу), а затем вернусь. Я подозреваю, что проблема заключается в контроллере входа в систему, но я не уверен. Я хотел бы, чтобы сообщение отображалось сразу же при неудачной отправке формы входа в систему. Я очень удивлен этой ошибкой, и любая помощь будет очень признательна.

Пожалуйста, смотрите соответствующий код ниже:

login.controller.js

(function() { 
    'use strict'; 

    angular 
     .module('app.login') 
     .controller('LoginFormController', LoginFormController); 

    LoginFormController.$inject = [ 'envService', '$http', '$state', 'ngParse', 'toaster', '$rootScope','AclService']; 
    function LoginFormController(envService, $http, $state, ngParse, toaster, $rootScope, AclService) { 
     var vm = this; 

     activate(); 

     //////////////// 

     function activate() { 

      // bind all data from the form 
      vm.account = {}; 
      vm.authMsg = ''; 
      vm.login = function() { 
      vm.authMsg= ''; 
      AclService.flushRoles(); 


       ngParse.User.logIn(vm.account.email,vm.account.password, { 

         success: function(user) { 
         var resp = new ngParse.Query(ngParse.Role).equalTo("users", ngParse.User.current()).find().then(function(results){ 
          if(results.length > 1){ 
          results.forEach(function(el){ 
           AclService.attachRole(el.attributes.name); 
          }) 
          }else{ 
          AclService.attachRole(results[0].attributes.name) 
          } 

         // After the role has been attached to user, THEN go to the next state 
         }) 
         .then(function(){ 
          // console.log("EMAIL:", vm.account.email); 
          // console.log("Pass:", vm.account.password); 
         $state.go('appNoSidebar.home'); 
         }) 
         }, 
         error: function() { 

         vm.authMsg = 'Incorrect credentials. Please try again!'; 
         } 

       }); 
      }; //end login 
     } // end activate 
    } // end controller 
})(); 

login.jade

.block-center.mt-xl.wd-xl 
    // START panel 
    .panel.panel-dark.panel-flat 
    .panel-heading.text-center 
     a(href="#") 
     img.block-center.img-rounded(src='app/img/carePortalLogo.png', alt='Image') 
    .panel-body 
     p.text-center.pv SIGN IN TO CONTINUE. 
     form(role='form', ng-submit="login.login()", name='login.loginForm', novalidate='').mb-lg 
     .form-group.has-feedback 
      input#exampleInputEmail1.form-control(type='email', name="account_email" placeholder='Enter email', ng-model="login.account.email", required='') 
      span.fa.fa-envelope.form-control-feedback.text-muted.loginIcon 
      span.text-danger(ng-show="login.loginForm.account_email.$dirty && login.loginForm.account_email.$error.required") This field is required 
      span.text-danger(ng-show="login.loginForm.account_email.$dirty && login.loginForm.account_email.$error.email") This field must be a valid email address 
     .form-group.has-feedback 
      input#exampleInputPassword1.form-control(type='password', name="account_password" placeholder='Password', ng-model="login.account.password", required='') 
      span.fa.fa-lock.form-control-feedback.text-muted.loginIcon 
      span.text-danger(ng-show="login.loginForm.account_password.$dirty && login.loginForm.account_password.$error.required") This field is required 


     button.btn.btn-block.btn-primary.mt-lg(type='submit') Login 

     .alert.alert-danger.text-center(ng-show='login.authMsg') {{login.authMsg}} 
    // END panel 

маршрут

.state('appNoSidebar.login', { 
     url: '/login', 
     templateUrl: helper.basepath('login.html'), 
     resolve: helper.resolveFor('modernizr', 'icons', 'toaster'), 
     controller: 'LoginFormController', 
     controllerAs: 'login' 
     }) 

Answer 1

Я решил эту проблему, обертывание vm.authMs g в $ scope.apply, чтобы связать vm.authMsg с областью действия следующим образом:

$scope.$apply(function(){ 
    vm.authMsg = 'Access Denied'; 
});