Question

我正在测试使用带角度1.6的es6使用browserify和babelify in gulp并且我注意到当我使用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>

我尝试从export default删除angular.module，但没有效果。当我将方法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的答案。

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

1 个答案: