Question

当我点击searchTrails.html上的此链接时，我正试图在trailDetails.html上显示单个跟踪信息。且在trailDetails.html上没有任何内容。但是，如果我将getDataService.js中的代码移动到searchTrailsController.js，一切都会好的。我不明白为什么。有人能提出一些建议吗？

app.js：

var app = angular.module("crowd", ["ngRoute"]);
app.config(function ($routeProvider){
    $routeProvider.when("/",{
        templateUrl:"views/searchTrails.html",
        controller:"searchTrailsCtrl"
    });
    $routeProvider.when("/trails/:trailId", {
        templateUrl: "views/trailDetails.html",
        controller: "searchTrailsCtrl"
    });
})

getDataService.js：

app.service("dataService", function ($http, $routeParams){
this.getSingleTrail = function (){
    var trail = [];
    $http.get("http://localhost:8080/DMW-skeleton-1.0/trail/findTrailByTrailId/" + $routeParams.trailId)
    .success(function (data){
        trail.push(data);
    })
    return trail
}})

searchTrailsController.js：

app.controller("searchTrailsCtrl", function ($scope, dataService ) {
$scope.trail = dataService.getSingleTrail();})

但是在trailDetails.html中没有任何内容：

<p>{{trail.trailInfo.trailDescription}}</p>

Answer 1

问题是您的数据是异步的，但您尝试同步保存它们。一步一步：

您定义变量trail = []
您将跟踪变量返回给控制器
服务器响应数据（但您已经返回路径）

您可以使用下一个代码解决此问题：

app.service("dataService", function ($http, $routeParams){
this.getSingleTrail = function (){
    var trail = [];
    return $http.get("http://localhost:8080/DMW-skeleton-1.0/trail/findTrailByTrailId/" + $routeParams.trailId);
}})


app.controller("searchTrailsCtrl", function ($scope, dataService ) {
    $scope.trail;
  dataService.getSingleTrail().success(function(data){
    $scope.trail = data;
  });
})

AngularJS视图不使用routeparams在服务中接收的数据进行渲染

1 个答案: