在Angular 1.6中使用`this`的上下文不会令人耳目一新

我是Angular的新手，在检查最佳实践时使用'this'而不是'scope'。我的初始值被反映，但函数调用后的值变化没有反映在视图上。在Angular 1.6中使用`this`的上下文不会令人耳目一新

这里是我的代码：

我在查看HTML

<div class="container" ng-controller="LoginCtrl as loginCtrl"> 
     <div class="row"> 
      <div class="col-lg-12 col-md-12 col-sm-12 title">Login</div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-12"><label>Email</label></div> 
      <div class="col-lg-6 col-md-6 col-sm-12"> 
       <input type="text" name="email" type="email" ng-model="loginCtrl.email"/> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-12"><label>Password</label></div> 
      <div class="col-lg-6 col-md-6 col-sm-12"> 
       <input type="password" name="password" ng-model="loginCtrl.password"/> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-12">&nbsp;</div> 
      <div class="col-lg-2 col-md-4 col-sm-12"> 
       <button class="btn btn-default" type="button" ng-click="loginCtrl.checkLogin()">Login</button> 
      </div> 
      <div class="col-lg-2 col-md-4 col-sm-12"> 
       <span>{!loginCtrl.message!}</span> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-lg-2 col-md-3 col-sm-12">&nbsp;</div> 
      <div class="col-lg-2 col-md-4 col-sm-12"> 
       <a href="{{$root}}/forgot-password">Forgot password</a> 
      </div> 
     </div> 
    </div>

我main.js

angular.module('app', [], function($interpolateProvider) { 
$interpolateProvider.startSymbol('{!'); 
$interpolateProvider.endSymbol('!}'); 
});

我控制器

angular.module('app').controller('LoginCtrl', ['$window', 'LoginService', 'CSRF_TOKEN', function($window, LoginService, CSRF_TOKEN) { 
this.message = 'Initial message'; 
this.email = ''; 
this.password = ''; 

this.checkLogin = function() { 
    var data = { 
     email: this.email, 
     password: this.password, 
     _token: CSRF_TOKEN 
    }; 

    LoginService.checkLogin(data) 
     .then(function(result) { 
      if (result.success) 
       $window.location.replace('user-section'); 
      else 
       this.message = result.message; 
     }); 
} 
}]);

请假定控制台上没有错误，一切正常。 初始消息正在打印，但this.message = result.message或this.message = 'Some result';没有得到体现。

来源

2017-07-30 Ashutosh

我认为问题在于你的checkLogin函数。

在函数中，您将this.message设置为某个字符串内部的另一个函数。这个新功能还创建了一个新的范围。因此，无论何时在新功能中使用关键字this，它都会引用新功能的范围，而不是控制器的范围。

为了解决这个问题，你可以再添变数var self = this的checkLogin功能外，并用它作为你的控制器参考：

angular.module('app').controller('LoginCtrl', ['$window', 'LoginService', 'CSRF_TOKEN', function($window, LoginService, CSRF_TOKEN) { 
this.message = 'Initial message'; 
this.email = ''; 
this.password = ''; 

var self = this; 

this.checkLogin = function() { 
    var data = { 
     email: this.email, 
     password: this.password, 
     _token: CSRF_TOKEN 
    }; 

    LoginService.checkLogin(data) 
     .then(function(result) { 
      if (result.success) 
       $window.location.replace('user-section'); 
      else 
       self.message = result.message; 
     }); 
} 
}]);

里面的新功能，你现在可以调用self.message的，因为self还指你的控制器，所以这将更新你的控制器中的消息。

来源

2017-07-30 15:48:56

完美答复，谢谢，你救了我的一天 – Ashutosh

可能LoginService正在使用原生承诺而不是$q，因此角度不知道您的异步更改。您需要在获取数据时运行摘要循环。试试这个：

LoginService.checkLogin(data) 
    .then((result) => { 
     if (result.success) 
      $window.location.replace('user-section'); 
     else 
      $scope.apply(function() { 
       this.message = result.message; 
      }); 
     });

注意箭头的功能，所以你不会失去参考的范围。

来源

2017-07-30 15:50:40 mattias

在Angular 1.6中使用`this`的上下文不会令人耳目一新

回答

相关问题