Question

我使用的是ES6，但我不确定这是ES6问题

我正在尝试使用google＆＃39;进行登录按钮使用谷歌api gApi和角度。我把gApi调用包装成了一个指令。该指令采用字符串clientId和一个名为onSuccessFunction的函数。 on success success函数在成功登录时被调用。目前我只是尝试在成功登录时记录配置文件信息，但是当它尝试调用第一个this.log.debug时出错（this.log是在构造函数中分配）函数，抱怨this未定义。

我该怎么做才能解决这个问题？

控制器

class LoginController {
  /*@ngInject*/
  constructor($scope, $log) {
    this.name = 'login';
    this.clientId = 'ourClientID';
    this.log = $log;
  }

  loggedIn(googleUser) {
    let profile = googleUser.getBasicProfile();
    this.log.debug('ID: ' + profile.getId()); 
    this.log.debug('Name: ' + profile.getName());
    this.log.debug('Image URL: ' + profile.getImageUrl());
    this.log.debug('Email: ' + profile.getEmail());
  }
}

查看

<google-login-button client-id="loginCtrl.clientId" on-success-function="loginCtrl.loggedIn"></google-login-button>

指令

class googleLoginButton {
  /*@ngInject*/
  constructor() {
    this.template = '<div></div>';
    this.scope = {
      clientId: '@',
      onSuccessFunction: '&'
    };
  }

  link(scope, element, attrs) {
    var div = element.find('div')[0];
    div.id = attrs.clientId;
    gapi.signin2.render(div.id, { 'onsuccess': scope.onSuccessFunction() }); //render a google button, first argument is an id, second options
  }
}

Answer 1

当方法通过绑定传递时，它会丢失其上下文。这与做

是一回事

let onSuccessFunction = LoginCtrl.loggedIn;
onSuccessFunction(...);

应该是

  constructor($scope, $log) {
    ...
    this.loggedIn = this.loggedIn.bind(this);
  }

根据经验，应该绑定每个应该用作回调的方法。

从调用控制器传入函数的ES6 Angularjs指令没有构造函数变量

1 个答案: