ng-includedのボタンをクリックしてください

Question

問題があります。 HTMLテンプレートページのボタンをindex.htmlページに追加しようとしています。私は、ページがあるこの

<ng-include src="'logout/logout.template.html'"></ng-include> 

ようにそれを実行します。

<button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.lala()"> 
    <span class="glyphicon glyphicon-log-out" ></span> Log out 
</button> 

問題があり、事は動作しません。 ctrl関数にはアクセスしません。私が読んだように、ng-includeは他の角度指定でうまく動作しないので、私の質問は、ボタンのテンプレートをindex.htmlに含めることができますか？それをやめなさい。

componenent：

'use strict'; 
angular 
    .module('logout') 
    .component('logout', { 
     templateUrl: 'logout/logout.template.html', 
     controller: ['$scope', '$location', '$localStorage', 'Logout', 
      function LogoutController($scope, $location, $localStorage, Logout) { 


       this.lala = function() { 
        console.log("doing logout"); 
       } 
      } 

     ] 
    }); 

Answer 1

私はそれはやり過ぎのように聞こえるけど、私はちょうどそれのために別のコンポーネントを作成します。 lala（）が実際にユーザーをログアウトする関数であれば、それをコンポーネントに含めることが最善です。したがって、すべての親コンポーネントでそれを繰り返す必要はありません。

完全なサンプルについては、このjsfiddleをご覧ください。私は、HTMLのすべてを書いたが、私は下の重要な部分をコピーした： `NG-include`は新しい子スコープを作成するというのが私の理解です https://jsfiddle.net/6cjd5ggq/1/

<logout></logout> 

angular.module('logoutapp') 
    .controller('logoutController', logoutController) 
    .component('logout', { 
     // you can use templateUrl, but it's easier this way in jsfiddle 
     template: `<button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.lala()"> 
        <span class="glyphicon glyphicon-log-out"></span> Log out 
       </button>`, 
     controller: 'logoutController' 
}); 

function logoutController() { 
    this.lala = function() { 
    alert("logout!"); 
    }; 
}