Angular ng-click not working in div

Question

Ok, I've been stuck here for a while, and I'm sure it's something relatively dumb

http://plnkr.co/edit/YcBnbE5VCU5rizkDWreS?p=preview

<head>
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.0.3/angular.min.js"></script>

    <script >
        function myCtrl($scope,  $window) {
            $scope.vm = {};
            $scope.vm.Courses = [
              { Id: 1, Name: "Course 1"},
              { Id: 2, Name: "Course 2"}
              ];
            $scope.OpenCourse = function(courseId) {
                $window.alert("Called " + courseId);
            }
        }
    </script>
</head>
<body ng-controller="myCtrl">
    <div>  
        <div ng-repeat="course in vm.Courses" ng-click="vm.OpenCourse(course.Id)">
            <div>
                <div>
                    <label>{{course.Name}}</label>
                </div>
            </div>
        </div>
    </div>
</body>

Why isn't ng-click firing here? It seems that this question is asked a lot, but none of the answers seem to help. It also looks like moving the div out of the repeat makes it work, but again, I'm not sure why.

Thanks

Felipe Pereira · Accepted Answer · 2014-12-16 19:06:41Z

21

Remove vm.

Result:

<div ng-repeat="course in vm.Courses" ng-click="OpenCourse(course.Id)">

Why?, because everything you set to $scope becomes available on the partial, then you just have to call it.

answered Dec 16, 2014 at 19:06

Felipe Pereira

12.5k4 gold badges43 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Carlos Rodriguez · Accepted Answer · 2014-12-16 19:23:47Z

8

The lack of "vm" in front of OpenCourse(course.Id) was actually a typo on my part when creating the plunker. I've marked an answer as correct, since it did cause the plunker to work, but my problem wasn't this. It turned out that I had a class assigned to outer div that was changing the z-index, putting that div "behind" the others, and not allowing the click to propagate.

answered Dec 16, 2014 at 19:23

Carlos Rodriguez

2,2202 gold badges20 silver badges31 bronze badges

4 Comments

Neo Over a year ago

I had a similar problem where the button was inside a <label> and ng-click was not firing. I had to restructure the layout to take the button outside and it started working then. Thanks for your reply.

idmean Over a year ago

Please uncheck the other answer if it does not actually answer you question.

Carlos Rodriguez Over a year ago

It did answer the question. The problem was that my question didn't properly express my problem

jste89 Over a year ago

I had a similar issue and changing the z-index sorted it. Thanks!

lokers · Accepted Answer · 2015-06-02 13:37:18Z

2

If you use <label> you might experience weird behaviour when clicking on it. Try changing it to something else if possible and re-test your code.

answered Jun 2, 2015 at 13:37

lokers

2,1962 gold badges18 silver badges20 bronze badges

Comments

ltalhouarne · Accepted Answer · 2014-12-16 19:06:52Z

0

Change it to :

ng-click="OpenCourse(course.Id)"

Working plunker

answered Dec 16, 2014 at 19:06

ltalhouarne

4,6382 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular ng-click not working in div

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related