AngularJS组件：如何从HTML触发函数及模板编写疑问

嘿，我来帮你搞定这个组件的写法问题！先从模板的错误修正说起，再顺带提一下控制器里容易踩的小坑：

正确的模板写法（my-component.html） #

<button ng-click="$ctrl.lol()">Press it</button>

为什么要这么改？ #

• 你原来写的<div ???="my-component.html">完全多余！组件的templateUrl已经指定了这个文件作为渲染模板，不需要给div加这种奇怪的属性，直接写组件要展示的内容就好。
• ng-click="$ctrl.lol"要改成$ctrl.lol()：这里必须加括号，不然点击按钮只是引用了函数本身，不会触发执行；加括号才会真正调用lol函数弹出提示框。

顺带修正控制器里的隐藏问题 #

你的控制器代码里还有个容易导致报错的点：没有给$ctrl赋值。AngularJS组件控制器里需要先把this赋值给$ctrl，不然$ctrl会是undefined，导致后续的$onInit无法执行。修正后的控制器代码如下：

app.component('myComponent', { 
  bindings: { data: "&" }, 
  templateUrl: 'elements/views/my-component.html', 
  controller: function() { 
    var $ctrl = this; // 必须先声明$ctrl指向当前控制器实例
    const lol = function() { alert("You did it noob!"); } 
    $ctrl.$onInit = function() { $ctrl.lol = lol; } 
  } 
});

补充：如果需要外层容器怎么办？ #

要是你因为样式或结构需求，必须给按钮加个外层div，直接写普通div就行，不需要任何额外属性：

<div class="my-component-wrapper">
  <button ng-click="$ctrl.lol()">Press it</button>
</div>

这样修改后，点击按钮就能正常弹出提示框啦！

内容的提问来源于stack exchange，提问作者joe123