상태를 유지하기 위해 AngularJS 라우팅을 얻는 방법은 무엇입니까?

AngularJS 라우팅에 익숙해졌으며 작동하는이 예제를 만들었습니다.상태를 유지하기 위해 AngularJS 라우팅을 얻는 방법은 무엇입니까?

그러나 "home"페이지에서 "about"이라는 텍스트를 입력 상자에 입력 한 다음 "about"페이지를 클릭 한 다음 "home"으로 돌아 오면 텍스트가 여전히 입력 상자에 있다는 것을 이해했습니다. , 즉 국가를 유지했을 것이다.

그렇지 않은가요? 그렇다면 사용자가 멀리 이동하는 페이지의 양식에 상태를 유지할 수있는 방법이 있습니까?

home.htm

<html ng-app="mainApp"> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
     <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-route.js"></script> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
     <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"> 
     <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" rel="stylesheet" /> 

     <style type="text/css"> 
      [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
       display: none !important; 
      }  
      a:focus { 
       outline: none; 
      } 
     </style>   
    </head>  
    <body ng-cloak ng-controller="mainController"> 
     <nav class="navbar navbar-default"> 
      <div class="container-fluid"> 
       <div class="navbar-header"> 
        <div class="navbar-brand">AngularJS Routing</div> 
       </div> 
       <div> 
        <ul class="nav navbar-nav"> 
         <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
         <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
         <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
        </ul> 
       </div> 
      </div> 
     </nav> 

     <div class="col-lg-12"> 
      <div ng-view></div> 
     </div>   

     <script> 
          var mainApp = angular.module('mainApp', ['ngRoute']); 
          mainApp.config(function ($routeProvider) { 
           $routeProvider 
             .when('/', { 
              templateUrl: 'pages/home.htm', 
              controller: 'mainController' 
             }) 
             .when('/about', { 
              templateUrl: 'pages/about.htm', 
              controller: 'aboutController' 
             }) 
             .when('/contact', { 
              templateUrl: 'pages/contact.htm', 
              controller: 'contactController' 
             }) 
             .otherwise({ 
              redirectTo: '/' 
             }); 
          }); 
          mainApp.controller('mainController', function ($scope) { 
           $scope.subtitle = 'the home page'; 
           $scope.message = ''; 
          }); 
          mainApp.controller('aboutController', function ($scope) { 
           $scope.subtitle = 'the about page'; 
          }); 
          mainApp.controller('contactController', function ($scope) { 
           $scope.subtitle = 'the contact page'; 
          }); 
     </script> 
    </body> 
</html>

출처

2015-01-08 Edward Tanguay

컨트롤러 상태를 유지하지 않는

<div class="jumbotron"> 
    <h1>Home</h1> 
    <p>{{subtitle}}</p> 
</div> 
<input ng-model="message"/>

index.htm으로는, 그들은 생성하고 경로를 통해 갈 때마다 파괴된다. 데이터를 저장하는 데 사용할 수있는 서비스를 구현 한 다음이를 유지하려는 경우 데이터를 서비스로 전송할 수있는 수단이 필요합니다. 컨트롤러에는 범위가 해제되기 바로 전에 발생하는 '$ destroy'이벤트가 있습니다.

mainApp.service('myData', function() { this.message = ''; }) .controller('mainController', function($scope, myData) { $scope.message = myData.message; $scope.$on("$destroy", function() { myData.message = $scope.message; }); });

출처

2015-01-08 16:25:37

상태를 유지하기 위해 AngularJS 라우팅을 얻는 방법은 무엇입니까?

답변

관련 문제