Javascript 如何在不同视图之间导航，同时在angularjs中维护视图模型数据_Javascript_Angularjs

Javascript 如何在不同视图之间导航，同时在angularjs中维护视图模型数据

javascript angularjs

Javascript 如何在不同视图之间导航，同时在angularjs中维护视图模型数据,javascript,angularjs,Javascript,Angularjs,当我在angularjs中从page1.html导航到page2.html，然后返回到page1.html时，我遇到了一个问题。我的页面模型数据不见了，我如何保存它，请在这件事上帮助我我见过一些类似的问题，但无法理解如何使用服务在AngularJS中实现此任务。在代码中使用本地存储概念，它将所有数据存储在浏览器中，当您浏览页面时，您可以从浏览器中获取所有数据。检查下面的示例代码 <html ng-app="app"> <head> <script d

当我在angularjs中从page1.html导航到page2.html，然后返回到page1.html时，我遇到了一个问题。我的页面模型数据不见了，我如何保存它，请在这件事上帮助我

我见过一些类似的问题，但无法理解如何使用服务在AngularJS中实现此任务。

在代码中使用本地存储概念，它将所有数据存储在浏览器中，当您浏览页面时，您可以从浏览器中获取所有数据。检查下面的示例代码

<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>


角度模块（'app'[
“NGS存储”
]).
控制器（'Ctrl'，函数(
$scope，
$localStorage
){
$scope.$storage=$localStorage.$default({
x:42
});
});
{{$storage.x}}+{{$storage.y}={{{$storage.x+$storage.y}}

在代码中使用本地存储概念，它将在浏览器中存储所有数据，当您浏览页面时，您可以从浏览器中获取所有数据。检查下面的示例代码

<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>


角度模块（'app'[
“NGS存储”
]).
控制器（'Ctrl'，函数(
$scope，
$localStorage
){
$scope.$storage=$localStorage.$default({
x:42
});
});
{{$storage.x}}+{{$storage.y}={{{$storage.x+$storage.y}}

尝试在同一个应用程序上设置两个HTML，以便数据不会丢失。使用路由视图显示两个HTML

如果您将HTML从一个更改为另一个，肯定会发生数据丢失，角度框架仅适用于单页应用….

尝试在同一个应用上设置两个HTML，以便数据不会丢失。使用路由视图显示两个HTML

如果您将HTML从一个更改为另一个，肯定会发生数据丢失，角度框架仅适用于单页应用程序……

如果我理解正确，您希望在应用程序的两个不同视图中共享某些状态。有很多方法可以实现这一点，正如您上面所说的，您可以使用服务

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

服务是单例的，实例化一次，然后由angular缓存，每次需要特定数据时，您都可以注入服务并调用提供的方法。

如果我理解正确，您希望在应用程序的两个不同视图中共享一些状态。有很多方法可以实现这一点，正如您上面所说的，您可以使用服务

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

app.run(function($rootScope) {
    $rootScope.name="something";
});
//Controller
app.controller('myController',function ($scope,$rootScope){ 
console.log("Name in scope ",$scope.name);
});

服务是单例的，实例化一次，然后由angular缓存，每次需要特定数据时，您都可以注入服务并调用提供的方法

app.run(function($rootScope) {
    $rootScope.name="something";
});
//Controller
app.controller('myController',function ($scope,$rootScope){ 
console.log("Name in scope ",$scope.name);
});