ng-单击包含ng的按钮

Question

I have a problem. I'm trying to include a button that's on a html template page on to my index.html page. I do it like this

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

The page is:

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

The problem is, the thing doesn't work. It won't access the ctrl function. As I read, ng-include doesn't work well with other angular directives so my question is, how else can I include my button template in the index.html without copy pasting the code because it's connected to a componenet an dservice so I can't break it.

The 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

I know it sounds like an overkill, but I would just create another component for it. If lala() is the function that actually logs the user out then it's best to include that in the component too, so you don't have to repeat it in every parent component.

Take a look at this jsfiddle for a complete sample. I wrote everything in the html, but I copied the important part below: 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!");
  };
}