Question

我遇到的问题是我的控制器中正在更新变量，但更新未反映在视图中。

应该在前端显示的变量是loginErrorMessage，但如果我离开然后返回到该页面，尽管在控制器中更新，变量将不会出现。

以下是控制器：

function LoginCtrl($rootScope, $state, $scope, UserService, AttributesService){
    var vm = this;
    vm.loginErrorMessage = '';
    vm.email = '';
    vm.password = '';
    vm.doLogin = doLogin;
    vm.successLoginJoinApiResponse = successLoginJoinApiResponse;

    function doLogin(){
      if(UserService.validateLoginCredentials()){
        UserService.loginUser()
        .success(function(response){
          vm.successLoginJoinApiResponse(response, false);
        })
      }else{
        vm.loginErrorMessage = 'Incorrect Email or Password';
        console.log(vm.loginErrorMessage)
        //vm.loginErrorMessage is updated at this point
      }
    }

    function successLoginJoinApiResponse(response, join){
      // stuff happens here, not where the issue is.
    }
  }

这是路线：

.state('app.login', {
    url: '/login',
    cache: false,
    views: {
      'menuContent': {
        templateUrl: 'templates/login.html',
        controller:'LoginCtrl as app'
      }
    },
  })

以下是观点：

<ion-view view-title="" class="">
  <ion-nav-bar class="white-back">
  </ion-nav-bar>
  <ion-content scroll="false" class="white-back has-header">

    // This is where the variable should be displayed
    <div class="login-error-message" ng-bind="app.loginErrorMessage">
    </div>

    <div class="center-everything mar-top-25">
      <form ng-submit="app.doLogin()">
        <div class="list pad-20 pad-top-30 pad-bottom-0">
          <label class="item item-input input-login">
            <input type="email" placeholder="Email" ng-model="app.email">
          </label>
          <label class="item item-input mar-top-15 input-login">
            <input type="password" placeholder="Password" ng-model="app.password">
          </label>
        </div>
        <div class="pad-20 pad-top-0">
          <a class="link" ng-click="app.doLogin()">
            <button class="button button-block blue-back white" id="button-submit-stuff" type="submit"><b>LOGIN</b></button>
          </a>
        </div>
      </form>
    </div>
  </ion-content>
</ion-view>

UserService.validateLoginCredentials（）返回false，因此脚本转到else语句，并且其中某处失败。

我已尝试运行$ scope。$ apply（），但我收到$ apply（）已在进行中错误。

我还注意到，当我离开页面时，变量会出现一段时间。

我也是通过Ionic运行的。

如果有人有任何建议，我真的很感激，谢谢！

Answer 1

只是一个猜测，但在你的doLogin函数中，didChangeSection方法是异步还是返回一个承诺？因为在这种情况下，else块中的代码永远不会运行。

Answer 2

首先验证登录凭据，然后尝试登录？

我猜测UserService.loginUser缺少.error（）的一部分。

function doLogin(){
  if(UserService.validateLoginCredentials()){
    UserService.loginUser()
    .success(function(response){
      vm.successLoginJoinApiResponse(response, false);
    })
    .error(function(err){
        vm.loginErrorMessage = 'Incorrect Email or Password';
        console.log(vm.loginErrorMessage)
        //vm.loginErrorMessage is updated at this point
    });
  } else{
    vm.loginErrorMessage = 'Incorrect Email or Password';
    console.log(vm.loginErrorMessage)
    //vm.loginErrorMessage is updated at this point
  }
}

您也知道：成功/错误简写在角度1.5中已弃用但你可以改写一下：

function doLogin(){
  if(UserService.validateLoginCredentials()){
      UserService.loginUser()
          .then(function(response){
              vm.successLoginJoinApiResponse(response, false);
          },
          function(err){
              vm.loginErrorMessage = 'Incorrect Email or Password';
              console.log(vm.loginErrorMessage);
              //vm.loginErrorMessage is updated at this point
          });
  } else{
      vm.loginErrorMessage = 'Incorrect Email or Password';
      console.log(vm.loginErrorMessage);
      //vm.loginErrorMessage is updated at this point
      }
  }

控制器更新后角度视图未更新

2 个答案: