目前我正在使用服务来执行操作,即从服务器检索数据,然后将数据存储在服务器本身上.
而不是这样,我想将数据放入本地存储而不是将其存储在服务器上.我该怎么做呢？
我对我的AngularJS应用程序有一个想法,我很好奇AngularJS社区是否会认为可以这样做...
简而言之,我正在连接到数据API并在页面上显示我的结果.我创建了一个角度服务,在$ rootScope.DataStore上创建数据存储.我还有一个服务方法,它使用API端点返回的数据更新DataStore.如果我使用DataStore.update('products')从我的控制器内部请求"products"API端点,这将使用我的产品数据更新$ rootScope.DataStore.products.现在,在视图/部分中,我需要做的就是说ng-repeat ="DataStore.products中的产品"来显示我的数据,并且我在哪个控制器范围并不重要.所以,本质上我的DataStore是我唯一的真相来源.
我觉得从这种方法中获得的东西很容易遵循语义和最小的控制器编码.因此,无论何时更新DataStore,任何绑定到DataStore的内容也都会更新.
这会给$ rootScope摘要周期带来太多负担,还是这只是一种奇怪的方式呢？或者它是一个非常棒的方式？:)欢迎任何评论.
我有一个带有ng-view的应用程序,可以将电子邮件发送给从联系人列表中选择的联系人.当用户选择"收件人"时,它显示另一个可以搜索,过滤等的视图/页面."发送电子邮件"和"联系人列表"是在ng-view中加载的不同html部分.
我需要保持发送表单状态,以便当用户从联系人列表中选择某人时,它返回到同一点(和相同的状态).我读到了不同的解决方案($ rootScope,使用ng-show隐藏的div,...)但我想知道UI路由器是否会帮助我使用它的状态管理器.如果没有,还有其他现成的解决方案吗？
谢谢!
我有一个简单的Angular JS场景.我在一个视图中显示了一个专家列表,该列表包含编辑专家的操作,这将在另一个视图中完成.这些视图来自服务器,不在一个文件中.它们不会一起装载.
<!-- experts.html -->
<div ng-controller='expertController'>
<!-- showing the list of experts here -->
</div>
在服务器上的另一个文件中我有:
<!-- expert.html -->
<div ng-controller='expertController'>
<!-- a form to edit/add an expert -->
</div>
我的控制器是:
app.controller('expertController', function ($scope) {
$scope.getExperts = function () {
_.get('/expert/getexperts/', null, function (data) {
$scope.$apply(function () {
$scope.experts = data;
});
});
};
$scope.editExpert = function (index) {
_.get('/expert/getexpert/', { id: $scope.experts[index].Id }, function (data) {
$scope.$apply(function () {
$scope.expert = data;
});
});
};
});
但是,编辑表单中不会显示任何数据.我使用Batarang检查了范围,但是expert …
我试图在页面刷新时从sessionStorage检索我的搜索和过滤数据.
sessionStorage.restorestate返回undefined,有谁知道为什么？
app.run(function($rootScope) {
$rootScope.$on("$routeChangeStart", function(event, next, current) {
if (sessionStorage.restorestate == "true") {
$rootScope.$broadcast('restorestate'); //let everything know we need to restore state
sessionStorage.restorestate = false;
}
});
//let everthing know that we need to save state now.
window.onbeforeunload = function(event) {
$rootScope.$broadcast('savestate');
};
});
Plunkr:http://plnkr.co/edit/oX4zygwB0bDpIcmGFgYr？p =preview
我试图在应用程序的结帐过程中在页面之间传递数据,但它没有按照应有的方式工作.我做了一些阅读,大多数人建议使用服务,但唯一的问题是当页面刷新(用户点击刷新或稍后返回)时,服务中的所有数据都会消失.这是有道理的,因为服务中的数据并不是持久的,而是导致问题.
所以问题是:如何在angularJS中的页面之间传递数据,并保持页面刷新后传递的数据？
这是我的代码到目前为止(我尝试使用查询字符串):
.service('checkoutService',
function checkoutService($location, Address, $routeParams, TicketGroup) {
var ticket_quantity = 0;
var ticket_group = {};
var selected_address = {};
this.loadInformation = function() {
if(!ticket_quantity && $routeParams.ticket_quantity)
ticket_quantity = $routeParams.ticket_quantity;
if(!ticket_group && $routeParams.ticket_group_id)
ticket_group = TicketGroup.get({id: $routeParams.ticket_group_id});
if(!selected_address && $routeParams.address_id)
selected_address = Address.get({id: $routeParams.address_id});
}
this.setTicketQuantity = function(quantity) {
ticket_quantity = quantity;
$location.path().search({ticket_quantity: quantity});
}
this.getTicketQuantity = function() {
return ticket_quantity;
}
this.setTicketGroup = function(object) {
ticket_group = object;
$routeParams.ticket_group = object.id;
}
this.getTicketGroup = function() {
return …我发现我几乎总是希望在路由更改中保留范围,因此,我发现我几乎停止使用控制器,除了将所有内容转发到服务之外.我的控制器最终看起来像这样:
app.factory('CtrlAService', function() {
return {
scope: {},
};
});
function CtrlA($scope, CtrlAService) {
$scope.data = CtrlAService.scope;
}
也就是说,我的控制器所做的就是将变量绑定到服务变量,而不是绑定一个或两个函数 - 我不使用控制器来做任何事情.
这种方法是否正确,如果没有,有什么更好的方法来实现这一目标？
我在这里做了一个示例应用程序:http://jsfiddle.net/Wc22k/1/
如何跨路线维护模型.例如,我有一个加载到主页的配置文件列表.主页还包含"加载更多"操作以加载更多配置文件,基本上将数据推送到模型.单击特定配置文件时,将通过路径激活该配置文件的详细视图.详细视图有一个后退按钮,可将用户重定向回主页.在路由回到主页时,由"加载更多"动作加载的数据(配置文件)将丢失.我需要使用"加载更多"前置数据来维护模型
以下是使用的代码
/* 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 …angularjs angularjs-service angularjs-scope angularjs-routing ngroute