通过ng-click调用角度控制器方法es6

问题描述：

我正在测试使用角度为1.6的es6使用browserify和babelify在吞咽，我注意到当我使用es6类创建控制器时，我无法再调用控制器使用ng-click的方法。通过ng-click调用角度控制器方法es6

控制器：

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的，但没有效果。当我将方法testMethod添加到$scope参数$scope.testMethod = testMethod;它可以工作，但这样做感觉非常肮脏。

我错过了什么，可以让我在使用es6语法时调用控制器方法，而无需将其指定给$scope？

如果您打算使用1.5+，我建议您使用组件，它允许您在组件定义中为视图声明控制器，并且可以使用'$ ctrl'调用它的方法。 – Baruch

答

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

答

如果你想使用类作为控制器（或ES5对象与原型继承关系），那么你需要使用控制器为语法。这告诉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-控制器。有关组件的示例，请参阅Baruch的答案。

通过ng-click调用角度控制器方法es6

相关推荐