javascript - Angular 'this' 语法中关于 'controller as' 关键字的混淆

Question

我有一个父 Controller UserEditCtrl 和一个子 Controller EditUserCtrl。在我的父 Controller 内部，我通过服务拉入用户对象:

userMgmtSvc.user(scope.editUserId).then(function(data) {
  this.user = data;
});

然后我想将用户对象的属性设置为另一个变量。

this.selectedRoles = this.user.roles;

但这会引发错误:

Cannot read property 'user' of undefined.

我对如何引用使用 this 设置的对象感到困惑。例如，我如何才能console.log该对象？因为 console.log('user', this.user); 返回未定义:

user undefined

这是父 Controller :

(
  function (app) {
    /* @fmt: off */
    'use strict';

    // @fmt:on
    app.controller('UserEditCtrl', ['$scope', '$http', 'userMgmtSvc', 'createUserSvc', 'authSvc', '$state', '$timeout', '$location', '_',
      function (scope, http, userMgmtSvc, createUserSvc, authSvc, state, timeout, location, _) {

      userMgmtSvc.user(scope.editUserId.id || sessionStorage.getItem('editUser')).then(function(data) {
        this.user = data;
        console.log('user', this.user);

      // GET states
      createUserSvc.states().then(function(data) {
          this.states = data;
          console.log(this.states);
      });

      // GET countries
        createUserSvc.countries().then(function(data) {
        this.countries = data;
      });

      // GET roles
      createUserSvc.roles().then(function(data) {
        this.roles = data;
      });

      // GET insurance groups
      createUserSvc.insuranceGroups().then(function(data) {
        this.insuranceGroups = data;
      });

      this.selectedRoles = this.user.roles;
    });

 }]);

}(window.app)
);

Answer 1

这是一个非常基本的错误，当您在回调中使用 this 引用当前上下文时，您不知道执行上下文，并且最终在其他地方设置了值，就会发生这种错误。

为了避免陷入此问题，当您的 Controller 启动时，只需将 this ( Controller 实例的上下文)设置为一个变量，并在其上设置所有内容。不要假设 this 会是什么。

 .controller('crtl',[deps..., function(...) {
       //Set this
       var vm = this; //Always use this cached variable have seen a commonly used name of vm

       //............... 
       //...............
       userMgmtSvc.user(scope.editUserId).then(function(data) {
         vm.user = data;
       });

       //...............
       vm.selectedRoles = vm.user.roles

   }

还有许多其他方法可以使用 angular.bind 或 es5 function.bind 创建绑定(bind)函数(函数引用预先绑定(bind)到指定的上下文)，但最简单的方法是使用缓存的上下文。

当您使用 typescript 时，您可以使用 => (粗箭头)语法，因为 ES5 模式下的 typescript 实际上会对此进行转换。

      userMgmtSvc.user(scope.editUserId).then((data) => {
         this.user = data;
      });

至:-

    var _that = this;
    userMgmtSvc.user(scope.editUserId).then((data) => {
         _that.user = data;
     });

Arrow functions当the engines starts supporting the arrow function syntax时将成为语言本身的一部分(具有ES6规范) 。所以使用 ES6 你可以安全地写:-

      userMgmtSvc.user(scope.editUserId).then((data) => {
         this.user = data;
      });

Here is an excellent answer that specifically targets this