Responding to click events in AngularJS

Question

I am new to AngularJS.

I have a PHP script which returns data in JSON format. I handle that response like so:

<div ng-app="myApp" ng-controller="gameCtrl"> 
    <table>
        <thead>
            <tr>
                <th class="medium">Date</th>
                <th class="small">Time</th>
                <th class="medium">Location</th>
                <th class="medium">Opponents</th>
                <th class="medium">Result</th>
            </tr>
            <tr ng-repeat="x in games">
                <td>{{ x.GameDate }}</td>
                <td>{{ x.GameTime }}</td>
                <td>{{ x.GameLocation }}</td>
                <td>{{ x.Opponents }}</td>
                <td class="game-info" data-game-id=""{{ x.GameID }}"">{{ x.Outcome  === null ? "" : x.Outcome + ' ' + x.Score }}</td>
            </tr>
        </thead>
    </table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('gameCtrl', function($scope, $http) {
    $http.get("script.php")
    .success(function(response) {$scope.games = response.games;});
});
</script>

If you notice the

<td class="game-info"

part I would like to respond to that cell click. I have the necessary jquery code:

$('.game-info').on('click', function()
{
   console.log('game info clicked');
   // snip
}

however that code is never run. If I have the td outside of the Angular div then it works as expected.

In short how can I listen for a click event using jquery from an element in an Angular block?

I would recommend using ng-click as opposed to jQuery, for several reasons. docs.angularjs.org/api/ng/directive/ngClick — azium
– azium, Commented May 1, 2015 at 3:06
I am new to Angular... Still trying to fathom where it fits into everything. Will look at ng-click — andrewb
– andrewb, Commented May 1, 2015 at 3:07
Angular is a big opinionated (and awesome) framework that expects you to work within it doing things the Angular way, as opposed to jQuery which is more of library that you can sprinkle here and there to help you write less code. — azium
– azium, Commented May 1, 2015 at 3:09
Yes of course. <a ng-click="doSomething(argument)">, then in controller $scope.doSomething = function (parameter) { .. }; — azium
– azium, Commented May 1, 2015 at 3:13

Wahid Kadwaikar · Accepted Answer · 2015-05-01 05:00:30Z

Why not do it the Angular way?

<div ng-app="myApp" ng-controller="gameCtrl"> 
    <table>
        <thead>
            <tr>
                <th class="medium">Date</th>
                <th class="small">Time</th>
                <th class="medium">Location</th>
                <th class="medium">Opponents</th>
                <th class="medium">Result</th>
            </tr>
            <tr ng-repeat="x in games">
                <td>{{ x.GameDate }}</td>
                <td>{{ x.GameTime }}</td>
                <td>{{ x.GameLocation }}</td>
                <td>{{ x.Opponents }}</td>
                <td class="game-info" ng-click="doSomething()" data-game-id=""{{ x.GameID }}"">{{ x.Outcome  === null ? "" : x.Outcome + ' ' + x.Score }}</td>
            </tr>
        </thead>
    </table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('gameCtrl', function($scope, $http) {

    $http.get("script.php")
    .success(function(response) {$scope.games = response.games;});

    $scope.doSomething = function(){
      console.log('game info clicked');
    }
});
</script>

This is just an implementation of azium's comment, but yes I ended up doing this. Thanks

Collectives™ on Stack Overflow

Responding to click events in AngularJS

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related