Question

我有一个向我发送一些数据的API。现在，我正在为此API制作AngularJS客户端。

所以，基本上，我有一个元素表。表格中的每个元素都有 ui-sref 链接到标准 element.html 页面。同时，每个元素都有 ng-click ，触发获取具有此特定ID的数据并将其放在 $ scope.data 变量的函数。 element.html 页面从 $ scope.data 获取数据并显示它。

我可以得到它。从API加载数据会花费更多时间加载页面，因此它无法显示正确的数据。

所以我对JS和AngularJS来说真的很陌生。谁能给我一些帮助？）

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：也许有一种方法可以保持页面加载，直到功能完成获取数据？

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'
        })
});

})();

Answer 1

为确保在您显示element.html页面时加载了数据，您可以使用$state.go()方法而不是ui-sref属性。

直接使用这种方法：

function success(response) {
    $scope.data = response.data;
    $state.go('element');
}

它应该有用。（在这种情况下，不要忘记在控制器中注入$state）

单击表元素加载数据

1 个答案: