Angular ng-click not working in div

Asked 16/12, 2014 at 19:3 Answered 2/6, 2015 at 13:37

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

Aprilette answered 16/12, 2014 at 19:3 Comment(0)

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.

Derte answered 16/12, 2014 at 19:6 Comment(0)

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.

Aprilette answered 16/12, 2014 at 19:23 Comment(4)

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. – Rhoea 27/3, 2015 at 3:55

Please uncheck the other answer if it does not actually answer you question. – Decade 12/6, 2015 at 19:51

It did answer the question. The problem was that my question didn't properly express my problem – Aprilette 12/6, 2015 at 19:52

I had a similar issue and changing the z-index sorted it. Thanks! – Uncrowned 20/11, 2015 at 14:15

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.

Bahuvrihi answered 2/6, 2015 at 13:37 Comment(0)

Change it to :

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

Working plunker

Schroer answered 16/12, 2014 at 19:6 Comment(0)

Recommended topics

Hot tags