2015-01-31 2 views
1

Я пытаюсь запустить AngularJS, создав простую галерею, которая получает изображения из json-файла, но каким-то образом я не могу показать данные.AngularJS не показывает данные json

index.html:

<!DOCTYPE html> 
<html ng-app="portfolioApp"> 
<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script> 
    <script src="app.js"></script> 
    <link rel="stylesheet" href="style.css"> 
</head> 

<body> 
    <div ng-controller="GalleryController" > 
     <ul> 
      <li ng-repeat="image in gallery.galleryData"> 
       <a ng-href="">{{image.IMAGE_WIDTH}} 
        <img class="thumbnail" ng-src="{{IMAGE_LOCATION+image.image}}" /> 
       </a> 
      </li> 
     </ul> 
    </div> 
</body> 
</html> 

app.js:

var app = angular.module('portfolioApp',[]); 
app.controller('GalleryController',['$http', function($http){ 
    var gallery = this; 
    gallery = []; 

    gallery.IMAGE_WIDTH = 405; 
    gallery.IMAGE_LOCATION = "http://rabidgadfly.com/assets/angular/gallery1/"; 

    $http.get("images.json").success(function(data){ 
    gallery.galleryData = data; 
}); 
}]); 

Я думаю, что вопрос имеет какое-то отношение объема переменной галереи, но я не уверен: http://i.stack.imgur.com/VBGku.png

+0

могли бы вы сказать мне, что 'images.json' содержит? –

ответ

0

Области применения API ($ apply) для распространения любых изменений модели с помощью системы в vie w извне «Углового царства» (контроллеры, услуги, Угловые обработчики событий).

Таким образом, вы должны добавить галерею $scope то она может быть доступна в представлении:

var app = angular.module('portfolioApp',[]); 
app.controller('GalleryController',['$http', '$scope', function($http, $scope){ 
    $scope.gallery = []; 

    $scope.gallery.IMAGE_WIDTH = 405; 
    $scope.gallery.IMAGE_LOCATION = "http://rabidgadfly.com/assets/angular/gallery1/"; 

    $http.get("images.json").success(function(data){ 
    $scope.gallery.galleryData = data; 
    }); 
}]); 
+0

Так оно и было, спасибо @Rebornix! – Donaldini

+0

Без $ scope он должен работать. –

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