为什么不能将ng-click附加到我的元素？

Question

The ng-click event is not firing on my element. I have tried the in-line controller script given below. I am unable to hit my alert. Is there any integration problems I should be wary of? What could be the issue here?

 <a class="button black"><div class="light" ng-click="AddCrims()"></div>Add Crims</a>

---

myApp.controller('MyCtrl', ['$scope', '$http', function ($scope, $http) {
    $scope.AddCrims = function () {
        alert('hi');
     }
});

Appreciated if anyone helps me this. thanks.

Answer 1

Assuming all essentials are correct eg ng-app="myApp" and in some way your controller is registered properly eg ng-controller="MyCtrl" , you need to add ng-click on your <a> - not <div> (which appears empty). Observe the following...

<a class="button black" ng-click="AddCrims()"><div class="light"></div>Add Crims</a>

JSFiddle Link - working demo

---

• Note: if you intend to attach the event to the <div> - you'll need to ensure it's not an empty element some way or another eg define static height/width. As a further observation, it'd be worth noting that anchor tags should have a href="" attribute, even if empty, for accessibility purposes.

JSFiddle Link - example <div ng-click="AddCrims()"></div>