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

我对ES6 Class和AngularJs如何协同工作感到困惑。使用AngularJs和ES6 Class：'this'在ng-click中不可用

注意：下面是一个伪代码来说明混乱，它从未被测试

HTML

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

class TstController { 

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

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

我的问题是如何通过TstController this引用clickMe？

来源

2017-07-29 Elia Weiss

它应该工作..你是如何调用'clickMe'？ –

请发布相关的HTML或提供一个MCVE。 – 31piy

当你使用ES6 class时，我建议你使用controllerAs语法。最终它将通过控制器别名公开类视图（this）。因此，无论您的控制器类中有哪些可用的视图，都可以在其别名的帮助下使用，例如，我在此处使用了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

来源

2017-07-29 06:53:10

@EliaWeiss - 这是在AngularJS中使用ES6类的正确方法。不要再用'$ scope'了，因为你有一个更清晰的方法来实现你想要的。 – 31piy

您需要在构造函数之前声明它。并使用此调用。

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

来源

2017-07-29 06:33:07

不，这不会是ES6类的有效语法。它只有有效的TS。 –

这是行不通的，'this'设置为ChildScope –

我对我的错误理解表示歉意 –

尖沙咀构造我做$scope.self = this;

我检查了“这个”对象在Chrome浏览器开发控制台，我发现我可以得到someVar与以下

this.$parent.$parent.self.someVar

在clickMe值

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

来源

2017-07-29 06:37:15

这里有些事情是错误的。你可以用问题语句创建plunker，我会很乐意帮助你:) –

你是正确的，我需要做'this。$ scope.self = this' –

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

回答

相关问题