Почему содержимое 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>

Файлы хранятся в тех местах, где они находятся. Но мой вывод выходит только с div в id = "header", а не с фотографиями, информация которых находится в файле JSON.

Почему данные в JSON не отображаются на выходе?

источник

2015-08-09 Ansu.Bty

первую очередь исправить вашу угловую ссылку из '' to '' –

Директива 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?

ответ

Смежные вопросы