Angular JS / PHP－可以从数据库中读取数据，但 ng-click 不起作用

Question

现在我可以从数据库中读取 PictureName 并将其显示在浏览器上。（下图：左边黑色方块）

我想做的是，当点击其中一行（例如：pic1）时，它会触发函数 change().

但无论我尝试什么，函数 change() 都不起作用。我应该如何处理我的代码？感谢您的回答和建议。 :)

read.php

<?php    
require 'lib.php';    
$object = new CRUD();

// table header
$data = '<table style="border-collapse:separate; border-spacing:0px 10px;">
            <tr>
                <th>No. </th>           
                <th>PictureName</th>
            </tr>';

// table body

$picturetb = $object->Read();

if (count($picturetb) > 0) {
    foreach ($picturetb as $key=>$picture) {
        $data .= '<tr ng-click="change()">
                <td>' . $key . '</td>
                <td><a>' . $picture['Picture_Name'] . '</a></td>            
            </tr>';
    }
}

$data .= '</table>';
echo $data;
?>

angular.js

var mainApp = angular.module("mainApp", []);
mainApp.controller('MyController', function ($scope) {

    $scope.readRecords = function () {
        $.get("ajax/read.php", {}, function (data, status) {            
            $(".addPicture").html(data);
        });
    }

    $scope.change = function () {
        console.log("do click");
    }
}

Answer 1

好吧，你可以使用 $compile 但通常以这种方式注入标记是一个非常非常糟糕的主意。为什么不return键/图片为JSON:

$arr = [];
foreach ($picturetb as $key=>$picture) {
  $arr[] = array('key' => $key, 'picture' => $picture['Picture_Name']);
}
echo json_encode($arr);

像这样检索它

$scope.readRecords = function () {
  $.get("ajax/read.php", {}, function (data, status) {            
    $scope.data = data;
  });
}

在您看来：

<table style="border-collapse:separate; border-spacing:0px 10px;">
  <thead>
    <tr>
      <th>No. </th>           
      <th>PictureName</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-click="change()" ng-repeat="d in data">
      <td> {{ d.key }} </td>
      <td><a> {{ d.picture }} </a></td>
    </tr>
  </tbody>
</table>

Answer 2

如果您坚持从数据库中获取 table，您仍然可以这样做。这是您需要做的。

-运行 angular 再次手动摘要循环。 table 加载后。

代码如下：-

$timeout(function () { 
var injector = $('[ng-app]').injector();
var $compile = injector.get('$compile');
var $rootScope = injector.get('$rootScope');
$compile(this.$el)($rootScope);
$rootScope.$digest();
},0);

$timeout 时间为 0 时运行摘要循环正确。

但我个人会建议@davidkonrad 回答。

Angular JS / PHP－可以从数据库中读取数据，但 ng-click 不起作用

Angular JS / PHP－ can read data from database but ng-click not working

php

angularjs

crud

angularjs-ng-click

read.php

angular.js

Angular JS / PHP－ 可以从数据库中读取数据，但 ng-click 不起作用

Angular JS / PHP－ can read data from database but ng-click not working

php

angularjs

crud

angularjs-ng-click

read.php

angular.js

Angular JS / PHP－可以从数据库中读取数据，但 ng-click 不起作用