Angular JS / PHP－ может читать данные из базы данных, но щелчок ng не работает
Теперь я могу прочитать PictureName из базы данных и показать его в браузере. (Изображение ниже: черный блок слева)
И я хочу, чтобы при нажатии на одну из строк (например, pic1) запускалась функция изменение().
Но что бы я ни пытался, функция изменение() не работает. Что мне делать со своим кодом? Спасибо за ответы и предложения. :)
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.info("do click");
}
}
Ответы 2
Ну, вы, мог, используете $compile, но, как правило, внедрять разметку таким образом - очень и очень плохая идея. Почему бы не вернуть ключ / картинку как 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>
Вы случайно не забыли подключить контроллер с разметкой? У вас должна быть разметка, завернутая в <body ng-controller = "MyController"> ... </body> или <div ng-controller = "MyController"> ... </div>, и поместить ваш <table> внутрь этого <div> ...
Я использовал <ng-controller>. Я думаю, что $scope.data = data; - это объект JSON. Поэтому я использую JSON.parse(data) для преобразования текста в объект JavaScript. И он по-прежнему ничего не показывает.
После этого я оборачиваю изменения в функции $scope.$apply. и это работает. Итак, моя проблема решена. Спасибо!
Вы все еще можете это сделать, если настаиваете на получении таблицы из базы данных. Вот что вам нужно сделать.
-Запустите цикл дайджеста angular снова вручную. После загрузки вашего стола.
Ниже приведен код: -
$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.
Большое спасибо. Я попробовал ваше предложение. Он произвел массив правильно. (что я проверил с помощью /**console.info($scope.datadata); /) Но теперь, на мой взгляд, он показывает только <thead>, а <tbody> ничего не показывает. И я думаю / <tr ng-click = "change ()" ng-repeat = "d in data"> * / здесь тоже правильно. У меня нет идея о том, почему не показывать ...