从HTML模板中的$http请求中检索的$scope访问更深层次的数据

Access deeper levels of data from $scope retrieved from $http request in HTML template

本文关键字：访问 scope 数据 深层次 检索 http HTML 请求      更新时间：2024-04-24

从视图访问存储在$scope中的数据时遇到问题。设置如下：

我在data/images.json中存储了图像数据。

{
  "sample-image": {
    "url": "imgs/sample.jpg",
    "description": "This is an image."
  }
}

它由工厂中的$http请求访问

app.factory('getImageData', ['$http', function($http) {
  var url = 'data/images.json';
  return $http.get(url)
  .success(function(data) {return data;})
  .error(function(err) {return err;});
}]);

这是由控制器调用的

app.controller('ImageCtrl', ['$scope', 'getImageData', function($scope, getImageData) {
    getImageData.then(function(data) {
      $scope.images = data;
    }, function(err) {
      console.warn('Error loading image: ', err);
    });
}]);

在我的模板中，理想情况下我希望有类似<img src='{{ images.data.sample-image.url }} />的东西，然而，{{ images.data.sample-image.url }}变成了0。

请参阅以下模板结果组合：

<pre>{{ images.data }}</pre>返回

｛"sample image"：｛"url"："imgs/sample.jpg"，"description"："This is an image"｝然而，<pre>{{ images.data.sample-image }}</pre>和<pre>{{ images.data.sample-image }}都返回0 

当我使用角度函数（如ng-repeat:）时，我可以访问更深层次的数据
<pre ng-repeat='image in images.data'>image.url</pre>返回
imgs/sample.jpg


如果数据清晰且可访问，为什么在调用{{ images.data.sample-image.url }}时会得到0？

问题是在模板中使用破折号，但您可以像这样使用它来访问对象属性。

["sample-image"]
{{images[0].data["sample-image"].url}}

示例：http://plnkr.co/edit/dyYQOc6I8mVtbaU5IlCo?p=preview

我希望它能有所帮助，

最佳，

您是否尝试过使用ng src而不是直接使用<img-src="{{...}}"/>插值图像源？请参阅Angular ng src文档。

为什么要用破折号？'样本图像

你不应该用下划线吗？

比如："sample_image"，因为js会看到这一点，并像数学方程一样求值。

您应该尝试使用字符串表示法，如images.data["sample image"]让我知道这是否有助于

相关文章：