使用 AngularJs 和 ES6 Class：'this' 在 ng-click 中不可用

Question

我对 ES6 Class 和 AngularJs 如何协同工作感到困惑。

注意：以下为说明混淆的伪代码，未经过测试

HTML

<div ng-repeat="x in list">
  <div ng-click='clickMe(x)'>click</div>
</div>

JS

class TstController {

  constructor() {
    this.someVar = 'value';
  }
  clickMe() {
    alert(this.someVar) //someVar is undefined
  }
}

问题是在 clickMe 中，this == ChildScope 因此 someVar 未定义，

我的问题是如何将 TstController this 引用传递给 clickMe？

Answer 1

你需要在构造函数之前声明它。并使用这个调用。

class Tst {
      someVar:any; // this line is missing
      constructor() {
        this.someVar = 'value';
      }
      clickMe() {
        alert(this.someVar) //someVar is undefined
      }
    }

Answer 2

在 Tst 构造函数中我做了 $scope.self = this;

我检查了 Chrome Dev Console 中的 'this' 对象，发现我可以使用以下方法获取 someVar 的值

this.$parent.$parent.self.someVar

在clickMe

注意：'this' 未设置为 'x'，它设置为 ChildScope

Answer 3

由于您使用的是 ES6 class，我建议您使用 controllerAs 语法。最终它将通过控制器别名在视图中公开 class context(this) 。因此，您的控制器 class 中可用的任何内容都可以在其别名的帮助下显示，就像这里我在 HTML.

上使用 tst.list & tst.clickMe

Html

<body ng-controller="TstController as tst">
  <div ng-repeat="x in tst.list">
    <div ng-click='tst.clickMe(x)'>click</div>
  </div>
</body>

Demo Plunker

使用 AngularJs 和 ES6 Class：'this' 在 ng-click 中不可用

Using AngularJs and ES6 Class: 'this' is not available in ng-click

javascript

angularjs

es6-class