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
}

然而，该代码永远不会运行。如果我在Angular div之外有td，那么它按预期工作。

简而言之，如何使用Angular块中元素的jquery来监听click事件？

Answer 1

为什么不采用Angular方式？

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

响应AngularJS中的单击事件

1 个答案: