代码在chrome控制台中工作，但不在页面中

Question

我尝试使用javascript为按钮分配功能，但由于某种原因它无法正常工作。这是有问题的按钮。在这一点上，我只是想让它变得敏感。

<button id="artbtn" class="artbtn btn">Art</button>

在Chrome开发者控制台中，我尝试了这个：

document.getElementsByClassName("artbtn")[0].addEventListener(
"click", function(){
    alert("hi")
})

它做了我想要的，它提出了一个警报。但当我尝试在页面上使用该脚本时...没有回应。

我使用带有node.js的angular v1.2.7可能对此有所贡献，但我不确定到底发生了什么。

Answer 1

这种角度方式的最佳方法是使用ng-click

<button id="artbtn" class="artbtn btn" ng-click="clickHandler($event)">Art</button>

您需要将clickHandler函数添加到控制器中的范围：

app.controller('MainCtrl', function($scope) {
  $scope.clickHandler = function (event) {
    alert('hi');
  }
});

Here is a working plunker