Question

我有一些调用API的Angular代码，我得到了正确的数据。

但是HTML中没有填充任何变量。

我没有得到任何图片，或者加载按钮没有文字。

我一直在这里，无法找到答案。

我在$ scope上遗漏了什么？

<script type="text/javascript">

  var application = angular.module('Application', []);

  application.service('ImageService', function ($http) {
    return {
      GetList: function (ipage) {
        return $http.get('api/images', { params: { ipage: ipage } });
      },
    }
  });

  application.controller('ImageController', function ImageController($scope, ImageService) {

    $scope = {
      images: [],
      loading: false,
      pages: { instagram: '12' }          
    }

    var load = function () {
      $scope.loading = true;
      ImageService.GetList($scope.pages.instagram)
        .success(function (data, status, headers, config) {
          $scope.images = $scope.images.concat(data.Images)
          $scope.pages.instagram = data.NextInstagramPage;
        })
        .error(function (data, status, headers, config) { })
        .finally(function () {
          $scope.loading = false
        });;
    }

    $scope.loader = function () {
      return $scope.loading ? 'loading' : 'load more';
    }

    $scope.reload = function () {
      load();
    }

    load();

  });

</script>

<div data-ng-app="Application" data-ng-controller="ImageController" class="gallery">
  <div data-ng-repeat='image in images' class="image">
    <img src="{{image.Url}}" alt="" />
  <a href="" class="reload" data-ng-disabled={{loading}} data-ng-click="reload()">{{loader()}}</a>      
</div>

Answer 1

问题是当您为$scope新对象分配$scope = {...};对象时，会完全覆盖它。相反，您可以使用少量其他属性扩展范围：

angular.extend($scope, {
    images: [],
    loading: false,
    pages: {
        instagram: '12'
    }
});

您还可以单独设置各个属性：

$scope.images: [];
$scope.loading = false;
$scope.pages = { instagram: '12' };

Answer 2

好像你的控制器没有正确尝试

application.controller('ImageController', ['$scope', 'ImageService' ,function ImageController($scope, ImageService) { ...}]);

和您的服务相同：

application.service('ImageService',['$http', function ($http) {...}]);

HTML没有填充Angular数据

2 个答案: