Question

在我的角度应用程序的主登录页面上，当用户尝试输入无效的用户名/密码组合时，我试图显示错误消息。出于某种原因，只有当我暂时离开浏览器中的打开页面然后返回时，ng-show错误消息才会显示。例如，如果我使用无效的用户名/密码对命中提交，则在切换到sublime（或任何其他打开的程序）然后切换回之前不会发生任何事情。我怀疑问题出在登录控制器上，但我不确定。我希望在登录表单的提交失败时立即显示该消息。我很被这个错误所困扰，任何帮助都会非常感激。

请参阅以下相关代码：

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

我通过在$ scope.apply中包装vm.authMsg来解决这个问题，以便将vm.authMsg绑定到范围，如下所示：

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

角度ng-show仅在我导航回窗口时有效

1 个答案: