javascript - 代码在chrome控制台中有效，但在页面中无效

我正在尝试使用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一起使用，这可能是造成这种情况的原因，但是我不确定到底发生了什么。

最佳答案

做到这一点的最好方法是使用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');
  }
});