通過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？

來源

2017-10-09 zero

如果您打算使用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+只是使用組件，那麼我的意見。

來源

2017-10-09 22:32:49 Baruch

如果你想使用類作爲控制器（或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的答案。

來源

2017-10-09 22:30:22

通過ng-click調用角度控制器方法es6

回答

相關問題