AngularJsとES6クラスを使用する： 'これはng-clickで利用できません。

どのようにES6クラスとAngularJsが連動するのか混乱しています。AngularJsとES6クラスを使用する： 'これはng-clickで利用できません。

注：以下は、それは問題がでていることであるJS

class TstController { 

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

HTML

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

をテストしたことはなかった、混乱を説明する擬似コードであります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で使用しました。

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。 –

これは動作しません、 'これはChildScopeに設定されています –

私の間違った理解のために謝ります –

私はクロームのDevコンソールの「この」オブジェクトを検査し、私は次のよう

clickMeで

this.$parent.$parent.self.someVar

でSOMEVARの値を得ることができることを見出した$scope.self = this;

をしました

注： 'this'は 'x'に設定されず、ChildScopeに設定されます

出典

2017-07-29 06:37:15

何かが間違っています..問題文でプランカを作成できますか、私はあなたを助けてくれるでしょう:) –

$ scope.self = this' –

AngularJsとES6クラスを使用する： 'これはng-clickで利用できません。

答えて

関連する問題