Angular.js：如何返回到先前视图中返回到运行时加载的DOM元素（保留状态）
我有一个角度应用程序，它有两个视图：
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消失了，如何保存它们？
问题答案：
更改路径时，负责该路径的控制器在加载路径时初始化，而在路径更改时销毁。因此，丢失数据的原因是控制器被重新初始化并且以前的数据永远不存在。
有两种方法可以解决此问题。
-
未被破坏的高级控制器-可能存在于体内-这会将其范围传递给子级控制器。但这不是真正的关注模块化。对于此问题…对于其他问题（身份验证，配置文件等）可能非常有用。
-
我主张的方式是将其放入服务（例如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);
};
}]);
-
我需要实现size（）函数，以便它对列表中的元素数量进行计数。 添加作文类的截图。我想我得从那里用一种方法。接口只声明push pop peek isempty函数。没有密码。我相信size（）函数不需要。这是我的第一堂编程课，所以我希望我已经给出了解决这个问题所需要的一切。请在此处帮助输入图像说明
-
我试图从一个片段中更改另一个片段中的。但是由于没有container就无法做到这一点，我不得不使用方法创建另一个值。然后我需要使用inflater方法返回这些视图值。如何返回两个视图？ 代码是在一个片段中编写的：
-
我正在为我的网站写一个聊天页面。我已经成功地设法向用户询问他们的名字，简单地说欢迎“username”。问题是，我还希望在聊天本身的名称输入框中使用相同的名称，而不是用户每次希望写消息时都必须输入自己的名称。我使用了onclick=来提示用户输入他们的名字，但我无法让它在名称框中显示该名字。 编辑：我发现，虽然javascript代码submit.php，但submit.php根本不显示：/
-
问题内容： 我有一个对快速服务器（我自己的服务器）进行反应的组件。服务器用于在上签署交易。一旦将交易包含在一个块中，就将一个对象返回给服务器。看起来像这样： 我需要将存入上述组件的状态。我已经搜索了2天，可能丢失了一些非常明显的内容。 这是服务器端代码还是客户端代码？由于与之交谈的固有时间延迟，我是否需要学习和使用异步？ 任何帮助表示赞赏！ 谢谢 问题答案： 要发出发布请求，您必须通过compon
-
问题内容： 从如何在PostgreSql的预订表中找到第一次空闲时间的最佳答案中选择 用于查找在给定日期和时间（2012年11月17日：在下面的示例中）开始的时间表中的间隔，它还可以查找周六，周日和公共假日。表中定义了公众假期 如何也排除周末和公共假期？ 硬编码空闲时间作为查询之类的保留时间 对于每个空闲时间范围，都需要在联合中有单独的行。 从给定的日期和时间开始，在工作日和工作时间（8:00 .
-
问题内容： 我想返回数组的奇数，但是Eclipse似乎不接受我的返回码。我认为这需要返回整个数组，因为我将数组设置为方法的参数。如前所述，我需要传递一个数组并获取该数组的特定元素作为回报。即使我将该数组设为静态，如何返回单个元素？ 编辑：好吧，这里是： 我知道这里可能存在多个错误，但我正在努力，不仅要返回奇数，还要将它们加在一起。 问题答案： 您的代码应如下所示： 这里的要点是方法返回类型，它应该