Question

我是Angular的新手，正在尝试实现无限滚动。我遇到了两个我不确定如何解决的挑战。首先，我想使用ngInfiniteScroll显示应用列表。这很好用。我使用他们的示例代码启动并运行。

现在我想点击一个应用来查看详细信息。我有视图显示，但我不确定如何将应用程序列表从一个控制器共享到下一个控制器。

//// AppCatalog constructor function to encapsulate HTTP and pagination logic
applicationCatalog.factory('AppCatalog', function($http) {
    var AppCatalog = function() {
        this.apps = [];
        this.selectedApps = [];
        this.busy = false;
        this.after = '';
        this.page = 1;
        this.maxresults = 50;
    };

    AppCatalog.prototype.nextPage = function() {
        if (this.busy) return;
        this.busy = true;
        var restUrl = "/web-portal/apps/catalog/search?page="+this.page+"&maxresults="+this.maxresults;
        $http({method: 'GET', url: restUrl}).success(function(data) {
            var apps = data;
            for (var i = 0; i < apps.length; i++) {
                this.apps.push(apps[i]);
            }
            this.after = this.apps[this.apps.length - 1].id;
            this.page += 1;
            this.busy = false;
        }.bind(this));
    };

    return AppCatalog;
});

applicationCatalog.controller('appCatalogController', ['$scope', 'AppCatalog',
    function(scope, AppCatalog) {
        scope.appcatalog = new AppCatalog();
    }
]);

首先，将新的AppCatalog（）实例化到appcatalog中感觉不对，因为每次从列表到详细信息返回列表时都会重新开始。此代码确实有效，无限滚动正确生成下一批应用程序。应该不会在我的角度页面的生命周期中存储应用程序列表，只有在刷新页面或离开页面时才会刷新。如何更改此代码才能执行此操作？

我的第二个挑战，但可能是相关的，当我想查看应用程序的详细信息时，我已经在应用程序列表中下载了该应用程序，但我不知道如何访问它们。

applicationCatalog.controller("appDetailsController", ['$scope', '$routeParams', 'AppCatalog',
    function(scope, params, appcatalog) {
        scope.appcatalog = appcatalog;
        var id = params.id;
        scope.id = id;
        ///TODO - this doesn't work appcatalog is empty
        var appcatalog = $scope.appcatalog;
        for(var i = 0; i < appcatalog.apps.length; i++) {
            var app = appcatalog.apps[i];
            if(app.id == params.id) {
                $scope.app = app;
                return;
            }
        }
    }
]);

在appDetailsController中，我想根据id从列表中提取应用程序。但我不知道如何从第二个控制器访问应用程序列表。它应该已经在记忆中了。

最后当我从这个细节控制器返回列表（这与我的第一个问题有关）时，它重新开始。我的分页信息，滚动列表中的当前位置等都丢失了。这个工作流程必须是常见的，但我不确定从这里开始。

提前感谢您的帮助。

贾里德

Answer 1

确定。在确定我的JavaScript需要一些工作之后我需要注意从网上复制和粘贴解决方案这里是我更新的解决方案。这是我上面问题的固定解决方案。我不知道它是否完美，我愿意接受改进建议。

var applicationCatalog = angular.module('applicationCatalog', ['infinite-scroll', 'ngRoute']);

///necessary hack
applicationCatalog.run(function($http){
    window.http = $http;
});

/*
 * Small config with template mapping
 */
applicationCatalog.config(function($routeProvider){
    $routeProvider
        .when("/", {
            templateUrl: '../assets/scripts/angular/views/appList.html'
        })
        .when("/apps/details/:id", {
            templateUrl: '../assets/scripts/angular/views/appDetails.html'
        })
        .otherwise({
            redirectTo: "/"
        });
});

applicationCatalog.factory('AppCatalog', function($http) {
    var apps = [];
    var activeApps = [];
    var activeAppIds = '';
    var busy = false;
    var after = '';
    var page = 1;
    var maxresults = 50;

    var nextPage = function () {
        if (busy) return;
        busy = true;
        var restUrl = "/web-portal/apps/catalog/search?page="+page+"&maxresults="+maxresults;
        $http({method: 'GET', url: restUrl}).success(function(data) {
            var newApps = data;
            for (var i = 0; i < newApps.length; i++) {
                apps.push(newApps[i]);
            }
            after = apps[apps.length - 1].id;
            page += 1;
            busy = false;
        }.bind(this));
    };

    var addNewApp = function (id, appcatalog) {
        this.activeApps.push(id);
        var ids = "";
        for(var i = 0; i < this.activeApps.length; i++) {
            if(ids.length > 0) ids += ",";
            ids += this.activeApps[i];
        }
        this.activeAppIds = ids;
    }

    return {
        apps: apps,
        activeApps: activeApps,
        activeAppIds: activeAppIds,
        busy: busy,
        page: page,
        after: after,
        maxresults: maxresults,

        nextPage: nextPage,
        addNewApp: addNewApp
    };
});

applicationCatalog.controller('appCatalogController', ['$scope', 'AppCatalog',
    function(scope, appcatalog) {
        var catalog = appcatalog;
        if(catalog.apps.length == 0) catalog.nextPage();
        scope.appcatalog = catalog;
    }
]);

applicationCatalog.controller('appCatalogSelectedController', ['$scope', 'AppCatalog',
    function(scope, appcatalog) {
        var catalog = appcatalog;
        scope.appcatalog = catalog;
    }
]);

applicationCatalog.controller('appDetailsController', ['$scope', '$routeParams', 'AppCatalog',
    function(scope, params, appcatalog) {
        var catalog = appcatalog;
        scope.appcatalog = catalog;

        var id = params.id;
        for(var i = 0; i < catalog.apps.length; i++) {
            var app = catalog.apps[i];
            if(app.id == params.id) {
                scope.app = app;
                return;
            }
        }
    }
]);

这里的主要区别在于工厂的设置方式。它不是在控制器中构造新对象，而是使用依赖注入将工厂放入控制器的范围。这个例子是使用列表和3个控制器，它们共享appcatalog工厂。现在这很好用。

我仍然不确定在滚动区域记住我的位置的最佳方法，并确保它在返回详细信息并返回列表时返回到同一位置。

AngularJS工作流程问题 - 列表 - ＆gt;细节 - ＆gt;名单

1 个答案: