Я новичок в AngularJS, и мне нужна ваша помощь для моего первого проекта.
Я хочу загрузить данные из JSON и отобразить их в таблице с помощью ng-repeat, который на самом деле работает очень хорошо. Однако я хочу разрешить пользователям перезагружать данные в таблице, перезагружая JSON.
Итак, сначала я загружаю страницу. Я получил JSON, и моя таблица заполнена. Затем я редактирую файл JSON и сохраняю его. Когда я нажимаю кнопку перезагрузки, данные, которые я получаю, точно такие же, как и при загрузке страницы. Я подумал, что это кеш, поэтому очистил кеш браузера и установил cache: false в запросе на получение, но это не работает.
Вот код, который у меня есть:
var routeApp = angular.module("app", ["ui.bootstrap", "ngRoute", "ngSanitize", "ngAnimate", "routeAppControllers"]);
routeApp.config(function ($routeProvider) {
$routeProvider
.when("/home", {
templateUrl: "/SCAP/scap/resources/templates/home.html",
controller: "ctrlHome"
})
.when("/dgroups", {
templateUrl: "/SCAP/scap/resources/templates/device-groups.html",
controller: 'ctrlDeviceGroups'
})
.when("/templates", {
templateUrl: "/SCAP/scap/resources/templates/templates.html",
controller: 'ctrlTemplates'
})
.otherwise({
redirectTo: '/home'
});
});
var routeAppControllers = angular.module('routeAppControllers', []);
routeAppControllers.controller('ctrlDeviceGroups', function ($scope, groupsService) {
$scope.dgroups = [];
var promise = groupsService.getGroups();
promise.then(function(data) {
$scope.dgroups = data;
});
$scope.reloadJSON = function() {
$scope.dgroups = [];
console.info("Cleaning all data...");
console.info("Reloading JSON");
var promise = groupsService.getGroups();
promise.then(function(data) {
$scope.dgroups = data;
console.info("New JSON loaded");
console.info(data);
});
}
}).service('groupsService', function($http, $q, $sce) {
var json_file = "json.json";
// Add to use that because it didn't trust the domain...
var trustedUrl = $sce.trustAsResourceUrl(json_file);
var deferred = $q.defer();
console.info("Loading JSON...");
$http(
{
method: 'GET',
url: trustedUrl,
cache: false
}).then(function(data) {
deferred.resolve(data.data);
});
this.getGroups = function() {
return deferred.promise;
}
});
Вот HTML (я удалил ненужные строки):
<div ng-controller = "ctrlDeviceGroups">
<button ng-click = "reloadJSON()">Reload entire table</button>
<table>
<tbody>
<tr ng-repeat = "item in dgroups">
<!--TD-->
</tr>
</tbody>
</table></div>
Если у вас есть идеи, как перезагрузить JSON и представление, я был бы очень благодарен. Я также заметил, но это не тема темы, что если я помещаю данные в свои $ scope.dgroups, ng-repeat не обновляется.
Заранее спасибо,
Переместите запрос GET в метод обслуживания:
app.service('groupsService', function($http, $sce) {
var json_file = "json.json";
// Add to use that because it didn't trust the domain...
var trustedUrl = $sce.trustAsResourceUrl(json_file);
this.getGroups = function() {
console.info("Loading JSON...");
var config = {
method: 'GET',
url: trustedUrl,
cache: false
};
return $http(config)
.then(function(response) {
return response.data;
});
};
});
Услуги одиночные. Строятся они только один раз. Запрос GET был ошибочно выполнен только один раз. Это нужно было сделать внутри метода getGroups
, чтобы он выполнялся при каждом вызове этого метода.
Полагаю, моя услуга сейчас бесполезна? Я буду использовать его для загрузки всех своих json-файлов, передав URL-адрес в качестве параметра.
Вроде теперь работает !! Так что, если я понимаю, мой сервис только что получил файл один раз, и каждый раз, когда я вызывал getGroups, это были одни и те же данные.