0
以下是我的HTML,AngularJS,JSON代码为什么JSON中的内容没有在HTML中显示?
的index.html
<! DOCTYPE HTML>
<html>
<head>
<link type='text/css' rel='stylesheet' href='styles/photostyle.css' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app/app.js"></script>
<title>My Photography</title>
</head>
<body ng-app="photoPage">
<div class="container">
<div id="header">
<p id="title">My Photography</p>
</div>
</div>
<div class="main" ng-controller="MainController">
<div class="container">
<div class="content">
<div class="photoNo" ng-repeat="photo in photos">
<photo-infos info="photo"></photo-infos>
</div>
</div>
</div>
</div>
</body>
</html>
app.js
var app = angular.module("photoPage", []);
app.controller("MainController", ['$scope', 'photos', function($scope, photos) {
photos.success(function(data) {
$scope.photos=data;
});
}])
.directive('photoInfos', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'photoInfos.html'
};
})
.factory("photos", ["$http", function($http) {
return $http.get('addonFiles/photoInfo.json')
.success(function(data) {
return data;
})
.error(function(err) {
return err;
});
}]);
photoInfo.json
[
{
"name": "shot 01",
"date":75416,
"photoUrl": "photos/01.jpg"
},
{
"name": "shot 02",
"date": 20150527111604,
"photoUrl": "photos/02.jpg"
},
{
"name": "shot 03",
"date": 20150626113654,
"photoUrl": "photos/03.jpg"
}
]
photoInfos.html
<div class="photo-container">
<img class="photo-responsive" ng-src="{{ info.photoUrl }}"/>
<h3>{{ info.name }}</h3>
<p class="photoDate">{{ info.date }}</p>
这些文件应保存在正确的位置。但我的输出与ID =“标题” div而不是其信息是在JSON文件中的照片。
为什么JSON中的数据没有在输出中显示?
首先纠正你的角度链接从'到'' –
photoInfos指令引用名为photoInfos.html的模板文件。你有吗? –
这是太多的代码...我们不需要看到你的CSS来帮助你解决Ajax问题。 –