爲什麼JSON中的內容沒有在HTML中顯示？

以下是我的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中的數據沒有在輸出中顯示？

來源

2015-08-09 Ansu.Bty

首先糾正你的角度鏈接從'到'' –

photoInfos指令引用名爲photoInfos.html的模板文件。你有嗎？ –

這是太多的代碼...我們不需要看到你的CSS來幫助你解決Ajax問題。 –

這裏是一個可以解決的plunker： http://plnkr.co/edit/pJBMtDkSx8gcGqPY4AyS?p=preview

基本上，我添加了下面的模板

<li>{{info.name}}</li>

，並改變了指令：

.directive('photoInfos', function() { 
    return { 
     restrict: 'E', 
     scope: { 
      info: '=info' 
     }, 
     templateUrl: 'photoInfos.html' 
    }; 
})

來源

2015-08-09 12:51:10

爲什麼JSON中的內容沒有在HTML中顯示？

回答

相關問題