Ale*_*lex 4 javascript savestate 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已经消失了,我如何保存它们？
Ste*_*how 12
当您更改路线时,负责该路线的控制器会在路线加载时进行初始化,并在路线更改时予以销毁.因此,丢失数据的原因是控制器重新初始化,以前的数据从不存在.
有两种方法可以解决这个问题.
未被破坏的高级控制器 - 可能存在于身体上 - 这将其范围传递给子控制器.但这不是关注的真正模块化.对于这个问题...对于其他问题非常有用 - 身份验证,配置文件等.
我提倡的方法是将其转换为服务,例如 - 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);
};
}]);
| 归档时间： |
|
| 查看次数： |
1248 次 |
| 最近记录： |