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中包含我的按钮模板而不复制粘贴代码，因为它连接到一个组件和服务所以我可以打破它。

组件：

'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!");
  };
}

ng-单击包含ng的按钮

1 个答案: