Question

我无法从我的视图访问$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

当我使用Angular函数（例如ng-repeat）时，我可以访问更深层次的数据：

<pre ng-repeat='image in images.data'>image.url</pre>返回

imgs/sample.jpg

如果数据显示在那里且可以访问，我拨打0时为什么会收到{{ images.data.sample-image.url }}？

Answer 1

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

Answer 2

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

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

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

我希望它有所帮助，

最佳，

Answer 3

你为什么要破折号？＆＃39;样本图像＆＃39;

你不应该使用下划线吗？

赞：＆＃39; sample_image＆＃39;因为js会看到这个，并评估像数学方程式。

您应该尝试使用字符串表示法，例如images.data [＆＃34; sample-image＆＃34;] 如果有帮助，请告诉我

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

3 个答案: