在重载时不重复渲染

Question

我有一个页面通过http.get从请求的数据中呈现ng-repeat，但是它没有从get请求中加载数据。我在这里缺少什么？

HTML：

<div class="container-fluid" ng-show="isLoggedIn()">
<div class="row images">
    <div class="col-md-8 col-md-offset-2">
        <div class="row">
            <div class="col-xs-6 col-md-4" ng-repeat="img in imgs">
                <div class="thumbnail">
                    <img src="{{img.url}}">
                </div>
            </div>
        </div>
    </div>
</div>

控制器：

angular.module('imginterestApp')
  .controller('GuestPageCtrl', function ($scope, $routeParams, $http) {
    $scope.userName = $routeParams.userId;
    console.log($scope.userName);
    $scope.imgs = [];

    $http.get('/api/images/').success(function(data){
        data.forEach(function(image){
        if(image.owner === $scope.userName) {
          $scope.imgs.push(image);
        }
      })
      console.log($scope.imgs);
    });
  });

Answer 1

您应该将获取图像的get请求附加到函数中并调用它。这将确保您的imgs数组将包含图像数据。

angular.module('imginterestApp')
  .controller('GuestPageCtrl', function ($scope, $routeParams, $http) {
    $scope.userName = $routeParams.userId;
    console.log($scope.userName);
    $scope.imgs = [];
  
    $scope.init = function () {
		$http.get('/api/images/').success(function(data){
        data.forEach(function(image){
        if(image.owner === $scope.userName) {
          $scope.imgs.push(image);
        }
      })
      console.log($scope.imgs);
    });
	}
	
	$scope.init();
});