ng-clickを介してes6でng-clickを呼び出す

Question

私は、1.6の角度でes6を使ってbrowserifyを使ってテストしています。そして、私は、es6クラスを使ってコントローラを作成すると、 ng-clickを使ってDOM上のメソッド

コントローラ：

export default class FocusbtnsController { 
    constructor($scope) {} 

    testMethod() { 
     alert('test method works!!'); 
    } 
} 

メインモジュール：

import angular from 'angular'; 
import FocusbtnsController from './focusbtns.controller'; 

export default angular.module('shapesite', []) 
    .controller('FocusbtnsController', FocusbtnsController); 

HTML：

<div class="center-btns ng-scope" ng-controller="FocusbtnsController"> 
    <div class="focus-btn-container" style="left:50%;top:5%" ng-click="testMethod()"> 
     <div class="diamond"> 
      <div class="diamond-btn"></div> 
     </div> 
    </div> 
</div> 

は、私が試した取り外しのが、効果はありません。 $scope引数にtestMethodというメソッドを追加すると、$scope.testMethod = testMethod;のように動作しますが、そのようにすると非常に汚いと感じます。

$scopeに代入することなくes6構文を使用している間にコントローラメソッドを呼び出すことができるものがありませんか？

Answer 1

私のコメントを拡張すると、単純なAngular 1.5+コンポーネントはこのようになります。

mycomponent.component.html

<button ng-click="$ctrl.someMethod()">Click Me</button> 

mycomponent.component.js

import template from './mycomponent.component.html'; 

class MyComponentController { 
    constructor($filter) { 
    'ngInject'; 

    this.$filter = filter; 
    } 

    someMethod() { 
    console.log('Hello World'); 
    } 
} 

const myComponent = { 
    template, 
    controller: MyComponentController, 
    bindings: {}, 
}; 
export default myComponent; 

mycomponent.module.js

import myComponent from './mycomponent.component'; 

angular.module('MyModule') 
    .component('myComponent', myComponent); 

<my-component></my-component>までご連絡ください。

ニコラスタワーは答えましたが、もう一度私の意見あなたは1.5を使用している場合+コンポーネントを使用するだけです。

Answer 2

クラスをコントローラ（またはそのようなプロトタイプ継承を持つES5オブジェクト）として使用する場合は、controller-as構文を使用する必要があります。これは、$ scopeではなく、コントローラ自体にある変数を使用するようにangleに指示します。したがって、テンプレートは次のように変更されます：

さらに、ng-controllerではなく、angularJSのコンポーネントを使用することをお勧めします。コンポーネントを使った例については、Baruchの答えを参照してください。