ng-单击包含ng的按钮

Question

我有个问题。 我试图在index.html页面的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不能与其他angular指令一起很好地工作，所以我的问题是，如何将我的按钮模板包括在index.html中而不复制粘贴代码，因为它已连接到comservice和dservice，所以我可以不要破坏它。

组件：

'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编写了所有内容，但是我复制了下面的重要部分： 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!");
  };
}