如何在angularjs中维护视图模型数据的同时在不同视图之间导航
[英]How can I navigate between different views while maintaining views model data in angularjs
问题描述
I have a problem when I make navigation from page1.html to page2.html in angularjs and then return back to page1.html my page model data is gone, how can I preserve that, kindly help me in this matter. 
当我在angularjs中从page1.html导航到page2.html，然后返回至page1.html时，我遇到了问题，我的页面模型数据不见了，我该如何保存，请在这方面为我提供帮助。
I have seen some similar questions but could not get the understanding how to achieve this task in AngularJS using services. 我已经看到了一些类似的问题，但无法理解如何使用服务在AngularJS中完成此任务。
4 个解决方案
解决方案1
2 已采纳 2016-11-02 10:07:08
If i understand correctly , you want to share some state across two different views of your application. 如果我理解正确，则希望在应用程序的两个不同视图之间共享某些状态。 There are many ways to achieve this, as you stated above you can use a service. 有多种方法可以实现此目的，如上所述，您可以使用服务。
var app = angular.module('myApp', []);
app.service('myService', function(){
var data;
this.setData = function(d){
data = d;
}
this.getData = function(){
return data;
}
});
app.controller('myCtrl1', function($scope, myService){
$scope.data = myService.getData();
//do something
});
app.controller('myCtrl2', function($scope, myService){
$scope.data = myService.getData();
//do something
});
Services are singleton, are instantiated once and then cached by angular, everytime you need that specific data you can inject the service and call the methods provided. 服务是单例的，一次实例化，然后按角度进行缓存，每当您需要特定数据时，就可以注入服务并调用提供的方法。
解决方案2
0 2016-11-02 09:31:19
Use local storage concept in your code, it will store all data in your browser, when you navigate the page then you can get all data from your browser. 在代码中使用本地存储概念，它将所有数据存储在浏览器中，当您浏览页面时，可以从浏览器获取所有数据。 check sample code below. 检查下面的示例代码。
<html ng-app="app">
<head>
<script data-require="angular.js@1.1.5" data-semver="1.1.5" src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script>
angular.module('app', [
'ngStorage'
]).
controller('Ctrl', function(
$scope,
$localStorage
){
$scope.$storage = $localStorage.$default({
x: 42
});
});
</script>
</head>
<body ng-controller="Ctrl">
<button ng-click="$storage.x = $storage.x + 1">{{$storage.x}}</button> + <button ng-click="$storage.y = $storage.y + 1">{{$storage.y}}</button> = {{$storage.x + $storage.y}}
</body>
</html>
解决方案3
0 2016-11-02 09:33:56
Try to set both HTML on same app so that data won't lose.use routing views to display both HTML, 尝试在同一个应用程序上同时设置两个HTML，以免数据丢失。使用路由视图显示两个HTML，
If you change HTML from one to another definitely data loss will happen ,angular frame-work only for single page apps.... 如果将HTML从一种更改为另一种，则肯定会发生数据丢失，只有单页应用程序会出现角度框架。
解决方案4
0 2016-11-02 10:37:22
app.run(function($rootScope) {
$rootScope.name="something";
});
//Controller
app.controller('myController',function ($scope,$rootScope){
console.log("Name in scope ",$scope.name);
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.