Отвечая на события click в AngularJS

Question

Я новичок в AngularJS.

У меня есть PHP-скрипт, который возвращает данные в формате JSON. Я обрабатывать этот ответ так:

<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> 

Если вы заметили

<td class="game-info" 

часть я хотел бы ответить на эти мобильные мыши. У меня есть необходимый код jquery:

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

однако этот код никогда не запускается. Если у меня есть td вне Angular div, он работает так, как ожидалось.

Вкратце, как я могу прослушивать событие click с использованием jquery из элемента в блоке Angular?

Answer 1

Почему бы не сделать это угловым способом?

<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>