Ich habe eine API, die mir einige Daten sendet. Und jetzt mache ich AngularJS-Client für diese API.Laden von Daten durch Klicken auf ein Tabellenelement
Also, im Grunde habe ich eine Tabelle von Elementen. Und jedes Element in der Tabelle hat ui-sref Verbindung zum Standard element.html Seite. Zur gleichen Zeit hat jedes Element ng-click, das die Funktion auslöst, die Daten mit dieser bestimmten ID erhält und sie unter $ scope.data variabel setzt. Die element.html Seite bekommen Daten von $ scope.data und zeigt es.
Und wie ich es bekommen kann. Das Laden von Daten aus der API nimmt beim Laden der Seite mehr Zeit in Anspruch, sodass keine korrekten Daten angezeigt werden.
Also ich bin wirklich neu in JS und AngularJS. Kann mir jemand auf, dass etwas Hilfe geben)
service.js
var service = angular.module('service', ['datatables']);
service.controller('DaraController', ['$http', '$scope', function ($http, $scope) {
$scope.data;
var configAuth = {
headers : {
'Content-Type': 'application/json',
'Authorization': localStorage.getItem('token')
}
};
this.getData = function (id) {
$http.get(urlAPI + '/data/' + id, configAuth).then(
function success(response) {$scope.data = response.data;},
function error(data) {console.log(data);}
);
};
}]);
dataDashboard.html
<!DOCTYPE html>
<html lang="en" ng-app="grapes">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Data table</title>
</head>
<body>
<div ng-include="'header.html'"></div>
<div class="container-fluid">
<div class="row">
<div ng-include="'sidebar.html'"></div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<h1 class="page-header">Data</h1>
<div class="table-responsive" ng-controller="DataController as roleController">
<table datatable="ng" class="table table-striped table-hover">
<thead>
<tr>
<th>id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="data in dataController.datas()">
<td>{{data.id}}</td>
<td><a ui-sref="element" ng-click="dataController.getData(data.id)">{{data.name}}</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
element.html
<!DOCTYPE html>
<html lang="en" ng-app="grapes">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body class="container">
<div ng-include="'header.html'"></div>
<div ng-include="'sidebar.html'"></div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div class="table-responsive" ng-controller="dataController as dataController">
<div>
<h1 class="sub-header">{{data.id}}. {{data.name}}</h1>
<div ng-repeat="operation in data.operations">
<p> - {{operation.name}}</p>
</div>
</div>
</div>
</div>
</body>
</html>
UPD: Vielleicht gibt ist eine Möglichkeit, beim Laden der Seite zu bleiben, bis die Funktion fertig ist, um Daten zu erhalten?
app.js
(function() {
var app = angular.module('app',['service', 'ui.router']);
app.controller('AppController', function() {
});
app.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('data', {
templateUrl: 'dataDashboard.html'
})
.state('element', {
templateUrl: 'element.html'
})
});
})();
Geben Sie den Code für Ihr Routing –
@Daniel_L Routing ist in der app.js. erledigt. – ottercoder
Es kann eine Race-Bedingung zwischen "ui-sref" und "ng-click" sein, die das gleiche Ereignis zur gleichen Zeit empfängt. Verwenden Sie anstelle von 'ui-sref' '$ state.go' in Ihrer 'ng-click'-Funktion. –