在 ES6 中通过 ng-click 调用角度控制器方法

Question

我正在使用 es6 和角度 1.6 在 gulp 中使用浏览器化和 babelify 进行测试，我注意到当我使用 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>

我尝试从angular.module中删除export default，但没有效果。当我将方法testMethod添加到$scope参数中时$scope.testMethod = testMethod;它有效，但这样做感觉非常肮脏。

我错过了一些东西，可以让我在使用 es6 语法时调用控制器方法，而不必将其分配给$scope？

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

另一种选择是尼古拉斯·塔（Nicholas Tower）的回答，但同样，在我看来，如果您使用的是1.5+，只需使用组件即可。

Answer 2

如果要将类用作控制器（或具有原型继承的 ES5 对象），则需要使用控制器 as 语法。这告诉 angular 使用控制器本身上的变量，而不是$scope上的变量。所以你的模板会变成这样：

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

我建议更进一步，使用angularJS的组件，而不是ng-controller。有关组件的示例，请参阅Baruch的答案。