javascript - angularjs 组件。如何从html触发功能

Question

我有一个 super 简单的组件。

app.component('myComponent', {
  bindings: {
    data: "&"
  },
  templateUrl: 'elements/views/my-component.html',
  controller: function() {

    const lol = function() {
      alert("You did it noob!");
    }

    $ctrl.$onInit = function() {
            $ctrl.lol = lol;
    }
});

现在我想制作新的 html，在名为 my-component.html 的文件夹 elements/views 中

我猜是这样的:

<div ???="my-component.html">
  <button ng-click="$ctrl.lol">Press it</button>
</div>

我应该放什么？？？在 HTML 中，我怎样才能让它工作？

我错过了什么？

长话短说，我需要制作一个移除按钮的组件，以防有人想多写一行代码。

Answer 1

您需要将 lol 方法附加到 Controller 中的 this

angular.
  module('app',[]).
  component('myComponent', {
    template: '<div><button ng-click="$ctrl.lol()">Press it</button></div>',
    controller: function myCompCtrl() {
      this.lol = function() {
        alert("You did it noob!");
      };
    }
  });

然后在 View 中

<div ng-app="app">
      <my-component></my-component>
    </div>

这是一个 plunker