在 es6 中通过 ng-click 调用 angular 控制器方法

Question

我正在 angular 1.6 中使用 es6 进行测试，在 gulp 中使用 browserify 和 babelify，我注意到当我使用 es6 class 创建控制器时，我不能再使用 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

如果你想使用类作为控制器（或具有原型继承的 ES5 对象），那么你需要使用 controller-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 的回答。

Answer 2

为了扩展我的评论，一个简单的 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+，则只需使用组件。

在 es6 中通过 ng-click 调用 angular 控制器方法

calling an angular controller method via ng-click in es6

javascript

angularjs

ecmascript-6

es6-class

angular-controller