javascript - AngularJS 试图获取图像 Json 文件并渲染模板时出现问题

Question

另一个更新

我发现 routeparams.Id 不起作用，因为我使用 ui-router 而不是 routeprovider 来定义我的路线。您可以改用 $stateParams。

已更新

我修复了我的 data.json 文件，但我的 detail.html 部分未正确呈现。

我改成了

Hi

<ul class="backpageimages">
    <li ng-repeat="img in extrainfo.images">
        <img ng-src="{{img}}">
    </li>
</ul>

hi 正在渲染，这意味着它的路由正确，但控制台显示

GET http://localhost:8000/data/undefined.json 404 (File not found) 

它找不到我的 1.json 文件。

现在我的 Controller 看起来像这样

backpageApp.controller('SecondCtrl', function($scope, $routeParams, $http) {
  $http.get('data/' + $routeParams.listingId + '.json').success(function(data) {
      $scope.listingId = $routeParams.listingId; /* added this explicity */
      $scope.extrainfo = data; 
  });
}); 

如果有帮助的话就是这个url

http://localhost:8000/#/listings/1

---

大家好，我是 angular js 的新手，它试图在 angular js 中构建一个小的 Backpage。我在第 7 步和第 8 步使用 angularjs 官方教程中的示例

http://docs.angularjs.org/tutorial/step_07

http://docs.angularjs.org/tutorial/step_08

我正在尝试获取一个包含图像的 json 文件，这些图像指向我本地文件夹中的图片。这些将显示在另一个 View 中。

这是我的数据文件夹中名为 1.json 的文件。该文件是经过验证的 json 文件。

{
    "images": [
        "images/pic1.jpg",
        "images/pic2.jpg",
        "images/pic3.jpg",
        "images/pic4.jpg",
        "images/pic5.jpg",
        "images/pic6.jpg",
        "images/pic7.jpg"
    ],

    "description": "The last room to be rented in a house of 4 bedrooms mostly young professionals students all females."
}

这是我的数据文件夹中的 data.json 文件片段

{
         "date":12012013,
         "id":1,
         "rent":600,
         "location": "East Boston",
         "title": "room close to transportation Jan 1st (East Boston) ",
        }

1.json 对应于我的 data.json 中的 id 1。 在我的模块中，我确保将“ngRoute”添加为依赖项

var backpageApp = angular.module('backpageApp', ['ui.router', 'ngResource', 'ngRoute']);

我下载了 angular-route.js 并将其添加到我的 index.html

<script src="js/vendor/angular-route.js"></script>

我有这个 Controller 可以根据 id 获取图像

backpageApp.controller('SecondCtrl', function($scope, $routeParams, $http) {
  $http.get('data/' + $routeParams.listingId + '.json').success(function(data){
      $scope.extrainfo = data; 
  });
}); 

我正在使用 ui router，所以我的状态是这样的

.state('listingdetail', {
      url: "/listings/:listingId",
      templateUrl: "partials/detail.html",
      controller: 'SecondCtrl'
    })

这是我的 detail.html

{{extrainfo.description}}



<ul class="pictures">
    <li ng-repeat="img in extrainfo.images">
        <img ng-src="{{img}}">
    </li>
</ul>

这是它在我的 chrome 开发工具中返回的内容

[$promise: Object, $resolved: false]
 app.js:25
SyntaxError: Unexpected token }
    at Object.parse (native)

第 25 行是我的第一个 Controller 的控制台日志。我有点迷路了。我不确定我破坏了渲染步骤的哪一部分。我的 index.html 中也有这个

<a href="#/listings/{{listing.id}}">
        Title:{{listing.title}}</a>

我有一个 data.json 文件在我的 firstctrl 中使用 $resource 返回并存储在 $scope.listings 中。我的最终目标是当有人点击该标题时，它会将用户引导至我显示图像的详细信息部分。

也许我想把它明确地放在我的 secondctrl 中

$scope.listingId = $routeParams.listingId; 

Answer 1

您的 json 文件无效。删除最后一个逗号并确保使用 http://www.jsoneditoronline.org/ 之类的服务对其进行验证以避免简单的错误。

{
         "date":12012013,
         "id":1,
         "rent":600,
         "location": "East Boston",
         "title": "room close to transportation Jan 1st (East Boston) ",  // <---- remove comma 
}