AngularJS 不显示 json 数据

Question

我一直在尝试 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

Answer 1

Scopes provide APIs ($apply) to propagate any model changes through the system into the view from outside of the "Angular realm" (controllers, services, Angular event handlers).

所以您应该将图库添加到 $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;  
  });
}]);

AngularJS 不显示 json 数据

AngularJS doesnt show json data

json

angularjs

ng-repeat