从视图访问存储在$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"]让我知道这是否有助于