AngularJS不显示json数据

debugcn 发表于 Dev

唐纳迪尼

我一直在尝试通过创建一个从json文件获取图像的简单画廊来尝试AngularJS，但是以某种方式我似乎无法显示数据。

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;  
});
}]);

我认为该问题与Gallery变量的范围有关，但我不确定：http : //i.stack.imgur.com/VBGku.png

Rebornix

范围提供API（$ apply）以将任何模型更改通过系统从“ Angular领域”（控制器，服务，Angular事件处理程序）的外部传播到视图中。

因此，您应该向其中添加图库，以便$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;  
  });
}]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。