5

如何跨路线维护模型。例如，我有一个加载到主页上的配置文件列表。主页还包含一个“加载更多”操作来加载更多配置文件，基本上将数据推送到模型。单击特定配置文件时，该配置文件的详细视图将通过路由激活。详细视图有一个后退按钮，可将用户重定向回主页。在路由回主页时，由“加载更多”操作加载的数据（配置文件）会丢失。我需要使用“加载更多”前置数据来维护模型

下面是使用的代码

/* Controllers */
var profileControllers = angular.module('profileControllers', ['profileServices'])


profileControllers.controller('profileListCtrl', ['$scope','$location', 'Profile','$http',
  function($scope,$location, Profile,$http) {
    $scope.Profiles = Profile.query(function(){

        if($scope.Profiles.length < 3) {
                    $('#load_more_main_page').hide();
                }
        });
    $scope.orderProp = 'popular';
    $scope.response=[];

    //LOADMORE
    $scope.loadmore=function()
    {

        $http.get('profiles/profiles.php?profile_index='+$('#item-list .sub-item').length).success(function(response){
            if(response) {
                var reponseLength = response.length;
                if(reponseLength > 1) {
                    $.each(response,function(index,item) {


                         $scope.Profiles.push({
                                            UID: response[index].UID,
                                            id: response[index].id,
                                            popular: response[index].popular,
                                            imageUrl: response[index].imageUrl,
                                            name: response[index].name,
                                            tags: response[index].tags,
                                            category: response[index].category
                                        });

                        });
                }
                if(reponseLength < 3) {
                    $('#load_more_main_page').hide();
                }
            }

        });


    }

  }]);





  /* App Module */

var profileApp = angular.module('profileApp', [
  'ngRoute',
  'profileControllers',
  'profileServices',
]);



profileApp.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/profiles', {
        templateUrl: 'partials/profile-list.html',
        controller: 'profileListCtrl',
        resolve: {
            deps: function ($q, $rootScope) {
                var deferred = $q.defer();
                var dependencies = ['js/sort.js'];
                $script(dependencies, function () {
                    $rootScope.$apply(function () {
                        deferred.resolve();
                    });
                });
                return deferred.promise;
            }
        }
      }).
      when('/profiles/:profileId', {
        templateUrl: 'partials/profile-detail.html',
        controller: 'profileDetailCtrl',

      }).
      when('/profiles/cat/:category', {
        templateUrl: 'partials/profile-list-category.html',
        controller: 'profileCategoryListCtrl',

      }).
      when('/create/', {
        templateUrl: 'partials/profile-create.html',
        controller: 'profileCreateCtrl',
        css: ['css/createprofile.css','css/jquery-ui-1.10.4.custom.min.css','css/spectrum.css'],

      }).
      otherwise({
        redirectTo: '/profiles'
      });
  }]);
4

4 回答 4

6

服务通常是在视图之间共享数据的公认方式。因为它是一个单例并且不会在路由更改时重新生成，所以您可以在那里“缓存”数据并从服务注入的任何控制器中检索它。

这个问题的第二个答案用代码解释了它：

使用 AngularJS 的多个视图中的相同数据

于 2014-04-30T21:04:29.550 回答
1

创建一个 Angular 服务并将其传递给不同的路由。

详细答案在这里 - https://stackoverflow.com/a/16559855/907388

于 2014-04-30T21:04:36.220 回答
0

您可以使用AngularJS 服务来做到这一点。服务是单例的，可以跨路由更改存储数据。

myModule.factory('serviceId', function() {
  var shinyNewServiceInstance = {
    // your data here
  };
  return shinyNewServiceInstance;
});

并在您的控制器中使用它：

controller('MyController', function($scope, serviceId) {
  // use serviceId here
});
于 2014-04-30T21:02:59.743 回答
0

您正在丢失$scope变量，因为在 Angular 中 acontroller不是单例。当您向后导航时，将生成它的一个新实例。

如果您想在路由更改之间存储任何类型的变量，您可以创建一个service来执行此操作。

于 2014-04-30T21:03:22.880 回答