コントローラで機能を登録してもng-clickが発砲しない

Question

こんにちは、私はアプリを使って問題を解決しています。コンソールにチェックを入れましたが、エラーメッセージは表示されません。

コンポーネントを作成し、それを他のテンプレートに挿入しました。テンプレート自体が動作しています（ボタンがレンダリングされ、ng-click属性の要素があることが確認されました）が、ボタンをクリックすると表示されます。この関数は起動されません。

プロジェクトはavailiableここにある：https://github.com/Aozaki-Touko/webApplication-dota2hero/tree/master/app

navbar.component.js：

"use strict"; 

angular.module("navbar").component("navbar", { 
    templateUrl: "/navbar/navbar.template.html", 
    controller: [ 
    "$location", 
    function($location) { 
     var self=this; 
     self.changeToHeroes = function(){ 
     alert("Button Pressed!"); 
     $location.path("/heroes"); 
     }; 
    } 
    ] 
}); 

navbar.template.html：

<button type="button" ng-click="$ctrl.changePathToHeroes()">Heroes</button> 

navbar.module.js：

"use strict"; 

angular.module("navbar",[]); 

Answer 1

これは私のために働いている、でなければなりません。 関数名に問題があったようです。あなたのメソッド名はスペルミスされ

"use strict"; 
 

 
angular.module("navbar").component("navbar", { 
 
    templateUrl: "/navbar/navbar.template.html", 
 
    controller: [ 
 
    "$location", 
 
    function($location) { 
 
     var self = this; 
 
     function changePathToHeroes(){ 
 
     alert("Button Pressedddddd!"); 
 
     $location.path("/heroes"); 
 
     } 
 
     self.changePathToHeroes = changePathToHeroes; 
 
    } 
 
    ] 
 
});

<button type="button" ng-click="$ctrl.changePathToHeroes();">Heroes</button>

Answer 2

それは

<button type="button" ng-click="changePathToHeros()">Heroes</button> 

Answer 3

使用controllerAs

angular.module("navbar").component("navbar", { 
    templateUrl: "/navbar/navbar.template.html", 
    controllerAs:"$ctrl", 
    controller: [ 
    "$location", 
    function($location) { 
     var $ctrl = this; 
     $ctrl .changeToHeroes = function(){ 
     alert("Button Pressed!"); 
     $location.path("/heroes"); 
     }; 
    } 
    ] 
});