Javascript 通过单击表元素加载数据_Javascript_Jquery_Html_Angularjs

Javascript 通过单击表元素加载数据

javascript jquery html angularjs

Javascript 通过单击表元素加载数据,javascript,jquery,html,angularjs,Javascript,Jquery,Html,Angularjs,我有一个向我发送数据的API。现在我正在为这个API制作AngularJS客户端基本上，我有一个元素表。表中的每个元素都有到标准element.html页面的UISREF链接。同时，每个元素都有ng click，它触发函数，该函数使用此特定id获取数据，并将其置于$scope.data变量。元素.html页面从$scope.data获取数据并显示它正如我所能得到的。从API加载数据比加载页面花费更多的时间，因此它没有显示正确的数据所以我对JS和AngularJS都是新手。有谁能帮我一下吗？

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

基本上，我有一个元素表。表中的每个元素都有到标准element.html页面的UISREF链接。同时，每个元素都有ng click，它触发函数，该函数使用此特定id获取数据，并将其置于$scope.data变量。元素.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页面时加载数据，可以使用

$state.go（）

方法而不是ui sref属性

通过直接使用以下方法：

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

它应该会起作用。

（在这种情况下，不要忘记在控制器中注入

$state

）

为您的控制器发布代码routing@Daniel_L路由在app.js中。完成。可能是

ui sref

和

ng click

同时接收相同事件之间的竞争条件。不要使用

ui sref

而是使用

$state.go

在

ng中单击function.niceee。现在我可以看到数据在element.html页面之前加载，这很好，但它仍然没有显示出来//是的，我知道为什么会这样。我正在控制器的变量中保存数据。但转到另一页重新加载此控制器并放弃以前的任何节省。有什么想法吗？）是的，实际上我看到了两种方法：-用：.state（'element'，{url:'/element/:id'，templateUrl:'element.html'}）更改您的状态配置。这样您就可以在dataController中执行“getData”功能，但可能您必须显示一个加载程序来显示您正在等待服务器数据…-另一种解决方案是将数据传递给公共服务。为此，您可以找到很多文章，但这里有一篇我很久以前使用过的文章：对于第一个解决方案，您可以检查state“resolve”属性，它应该比在dataController中处理整个“getData”函数要好一些。取决于您是否真的希望在页面更改之前加载数据，或者异步显示是否足够好。。。
(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'
        })
});

})();

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