Angular.js：如何返回到先前视图中返回到运行时加载的DOM元素（保留状态）

一尘不染

Angular.js：如何返回到先前视图中返回到运行时加载的DOM元素（保留状态）

angularjs

我有一个角度应用程序，它有两个视图：

1）清单检视

2）详细视图

当您从列表视图中单击缩略图时，将转到详细信息视图，这是以下路线：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/list', {
        templateUrl: 'partials/list.html',
        controller: 'ListCtrl',

      }).
      when('/list/:id', {
        templateUrl: 'partials/detail.html',
        controller: 'DetailCtrl',

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

现在’listCtrl’控制器中有一个loadmore函数，用于加载

myControllers.controller('ListCtrl', ['$scope', '$location', 'Troll', '$http',

function ($scope, $location, Troll, $http) {
    $scope.Trolls = Troll.query();
    $scope.orderProp = 'popular';
    $scope.fromData = {};
    //console.log($scope.Trolls);
    //this will be used to fetch the data in json which is defined in services.js

    $scope.loadmore = function () {
        jQuery.ajax({
            url: 'trolls/trolls.php?troll_index=' + $('#main-content #item-list .sub-item').size(),
            type: 'GET',
            async: false,
            data: {},
            dataType: 'json',
            success: function (response) {


                if (response != null) {
                    $.each(response, function (index, item) {

                        $scope.Trolls.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
                        });

                    });
                }
            },
            complete: function () {},
            error: function () {
                console.log('Failed!');
            }
        });
        $scope.text = 'Hello, Angular fanatic.';
        $http.get('trolls/trolls.php?troll_id=' + Troll);

    }

}]);

问题：现在的问题是，如果单击loadmore后进入详细视图，然后又回到列表视图，则新加载的div消失了，如何保存它们？

阅读 211

2020-07-04

共1个答案

一尘不染

更改路径时，负责该路径的控制器在加载路径时初始化，而在路径更改时销毁。因此，丢失数据的原因是控制器被重新初始化并且以前的数据永远不存在。

有两种方法可以解决此问题。

未被破坏的高级控制器-可能存在于体内-这会将其范围传递给子级控制器。但这不是真正的关注模块化。对于此问题…对于其他问题（身份验证，配置文件等）可能非常有用。
我主张的方式是将其放入服务（例如listService）中，这将获取并缓存数据，并在重新加载数据时将其传递回listController，从而防止数据丢失。

解决的第一种方法可能是…

因此，如果您有一个更高级别的控制器来负责获取数据或将其移至我将要执行的服务中，那么从loadMore函数加载的数据将继续存在，但它必须位于更高的位置更改路径时未销毁的父范围。

HTML：

<body ng-controller="ApplicationController">
     <!-- Code Here -->
</body>

控制器：

myControllers.controller('ApplicationController', function($scope) {
     var data = [];

     $scope.loadmore = function () {
        // Use Angular here!!! $http not jQuery! 
        // Its possible to write a complete Angular app and not ever true jQuery
        // jQuery Lite the Angular implementation will be used though
        jQuery.ajax({
            url: 'trolls/trolls.php?troll_index=' + $('#main-content #item-list .sub-item').size(),
            type: 'GET',
            async: false,
            data: {},
            dataType: 'json',
            success: function (response) {


                if (response != null) {
                    $.each(response, function (index, item) {

                        data.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
                        });

                    });
                }

                return data;

            }
            error: function () {
                console.log('Failed!');
            }
        });

    }
});

但是我真的不喜欢这种方法，因为它有点hacky …并且使用了jQuery …

使用服务获取/缓存的第二种方法：

因此，让我们将其拉入服务。

myServices.factory('listService', function($http, $q) {

   var//iable declaration 
      service = {},
      list = []
   ;
   /////////////////////   
   //Private functions//
   /////////////////////

   function loadMore(url) {
      var deferred = $q.defer();

      $http({ method: 'GET', url: url }) // Need to pass in the specific URL maybe from the DOM scoped function?
      .success(function(data) {
         deferred.resolve(data);
      })
      .error(function() {
        deferred.reject();
        //Do error things
      });

     return deferred.promise; 
   }

   ////////////////////
   //Public Functions//
   ////////////////////

   service.loadMore = function(url) { 
      // Used for loading more data
      loadMore(url).then(function(data) {
        list.push(data);
        return list
      });
   }

   service.getList = function() {
      // Returns the currently loaded data
      return list;
   }

 return service;

});

然后在您的控制器中：

myControllers.controller('ListCtrl', ['$scope', '$location', 'Troll', listService

function ($scope, $location, Troll, listService) {
    $scope.Trolls = Troll.query();
    $scope.orderProp = 'popular';
    $scope.fromData = {};


    $scope.loadmore = function(subItemSize) { //add url specific params here
       var url = 'trolls/trolls.php?troll_index=' + subItemSize;
       return listService.loadMore(url);
    };

}]);

2020-07-04