Question

我正在制作一个使用角度的图库，我对图像进行分类，因此当图库加载时，每个类别都由图像表示，当用户点击图像时，他们会看到该图库的整个图像。

因为我创建了一个数组，所以每个代表一个类别的图像都有一个数组的块，并包含该类别中所有图像的信息。并使用该块加载这些图像。

所以我试图使用$ routeParams所以我可以为每个类别创建一个url来加载该视图中的数据，类别的代表性图像正在加载正常但我无法在视图中加载该类别的图像。

我的模块代码是：

(function () {
var app = angular.module('myApp', ['ngRoute']);

app.config(function ($routeProvider) {
    $routeProvider

            .when('/', {
                controller: 'contentsCtrl',
                templateUrl: 'views/contents.php'
            })

            .when('/news/', {
                controller: 'newsCtrl',
                templateUrl: 'views/news.php'
            })

            .when('/notes/', {
                controller: 'notesCtrl',
                templateUrl: 'views/notes.php'
            })

            .when('/records/', {
                controller: 'recordsCtrl',
                templateUrl: 'views/records.php'
            })

            .when('/gallery/', {
                controller: 'galleryCtrl',
                templateUrl: 'views/gallery.php'
            })

            .when('/gallery/:galleryID', {
                controller: 'imagesCtrl',
                templateUrl: 'views/images.php'
            })

            .when('/statute/', {
                controller: 'statuteCtrl',
                templateUrl: 'views/statute.php'
            })

            .when('/forms/', {
                controller: 'formsCtrl',
                templateUrl: 'views/forms.php'
            })

            .when('/about/', {
                controller: 'aboutCtrl',
                templateUrl: 'views/about.php'
            })

            .when('/contact/', {
                controller: 'ContactCtrl',
                templateUrl: 'views/contact.php'
            })

            .when('/post/', {
                controller: 'PostCtrl',
                templateUrl: 'views/post.php'
            })

            .otherwise({redirectTo: '/'});
});

并且控制器的代码是：

(function () {
var imagesCtrl = function ($scope, $http, $routeParams) {

    $http.get("includes/gallery.php").success(function (response) {
        $scope.gallery = response.gallery;
    });

    var galleryID = $routeParams.galleryID;
    $scope.images = $scope.gallery[0];

    function init() {
        // Search gallery for the galleryID
        for (var i = 0, len = $scope.gallery.length; i < len; i++) {
            if ($scope.gallery[i].imageCategory == parseInt(galleryID)) {
                $scope.images = $scope.gallery[i].category;
                break;
            }
        }
    }

    init();

};

imagesCtrl.$inject = ['$scope', '$http', '$routeParams'];

angular.module('myApp').controller('imagesCtrl', imagesCtrl);
}());

这是观点：

<div class="row">

<div class="col-lg-12">
    <h1 class="page-header">{{ galleryID }}</h1>
</div>
<a href="#/gallery/" class="btn btn-action pull left">Back to Gallery</a>
<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 thumb" ng-repeat="image in images">
    <img class="img-responsive" src="./uploads/images/{{ image.imageName}}" alt="" style="width:400px; height:160px;">
</div>

所以谁知道问题是什么？我很感激你的帮助！

Answer 1

您在发送$ http请求后立即调用init（）函数。因此它尝试在$ scope.gallery中查找图库，但是当$ http请求的响应可用时，很久就会初始化$ scope.gallery。

代码应为：

$http.get("includes/gallery.php").success(function (response) {
    $scope.gallery = response.gallery;
    init();
});

function init() {
    // Search gallery for the galleryID
    for (var i = 0, len = $scope.gallery.length; i < len; i++) {
        if ($scope.gallery[i].imageCategory == parseInt($routeParams.galleryID)) {
            $scope.images = $scope.gallery[i].category;
            break;
        }
    }
}

那说，为什么你从服务器获取每个页面的所有画廊，应该渲染一个画廊。您应该将图库ID发送到服务器，服务器应仅响应该类别，而不是始终响应所有图库。

Answer 2

另一种方法是使用$router resolve，路由器将等待这些承诺得到解决，或者在实例化控制器之前拒绝承诺。

路线设置：

.when('/gallery/', {
  controller: 'galleryCtrl',
  templateUrl: 'views/gallery.php'
  resolve: {
    gallery: ['$http', function($http) {      
        return $http
          .get('includes/gallery.php')
          .then(
            function success(response) {
              return response.data;
            },
            function error(reason) {
              return false;
            }
          );
      }
    ]
  } 
})

控制器应如下所示：

(function (angular) {
    var imagesCtrl = function ($scope, $http, $routeParams, gallery) {

        $scope.gallery = gallery;

        var galleryID = $routeParams.galleryID;
        $scope.images = $scope.gallery[0];

        function init() {
            // Search gallery for the galleryID
            for (var i = 0, len = $scope.gallery.length; i < len; i++) {
                if ($scope.gallery[i].imageCategory == parseInt(galleryID)) {
                    $scope.images = $scope.gallery[i].category;
                    break;
                }
            }
        }

        init();

    };

    imagesCtrl.$inject = ['$scope', '$http', '$routeParams', 'gallery'];

    angular.module('myApp').controller('imagesCtrl', imagesCtrl);
}(angular));

使用$ routeParams进行自定义视图？

2 个答案: