Держите формы ввода на AngularJS изменения маршрута

Рассмотрим следующий пример:Держите формы ввода на AngularJS изменения маршрута

main.html:

<html> 
    <body> 
     <script> 
      angular.module('app', ['ngRoute']).config(function($routeProvider) { 
       $routeProvider 
        .when('/page1', { templateUrl : 'page1.html' })  
        .when('/page2', { templateUrl : 'page2.html' }) 
      }) 
     </script> 

     <a href="#page1/">Page 1</a> 
     <a href="#page2/">Page 2</a> 

     <div ng-view></div> 
    </body> 
</html>

page1.html

Page 1: <input type="text">

page2.html

Page 2: <input type="text">

DEMO : http://plnkr.co/edit/1BfO7KkHeMD3EpsULNGP?p=preview

Нажмите на одну из ссылок Страница 1 или Страница 2. Введите что-то в поле и нажмите на противоположную ссылку. Поле очищается. Есть ли способ сохранить ввод? Это очень полезно, если пользователь публикует комментарий, но должен войти в систему до того, как изменения будут сохранены. Пользователь будет перенаправлен на страницу входа в систему и после того, как логин будет перенаправлен на страницу ввода.

источник

2014-10-30 user1506145

Я думаю, вы можете быть заинтересованы в поиске в интерфейс хранения в HTML5: http://www.w3.org/TR/webstorage/#storage –

вы должны смотреть в angularjs 2 –

Вы можете использовать factory (или value), чтобы обеспечить простой способ совместного использования объекта между контроллерами.

Вот пример:

myApp.factory('DataHolder', function(){ 
return { myData: true, otherData: 'haha' }; 
}); 
// Or, with value 
myApp.value('DataHolder', { myData: true, otherData: 'haha' });

А потом, в контроллерах:

myApp.controller('CtrlA', function ($scope, DataHolder){ 
    $scope.sharedData = DataHolder; 
}); 

myApp.controller('CtrlB', function ($scope, DataHolder){ 
    $scope.sharedAsWell = DataHolder; 
});

И в ваших просмотров:

<div ng-controller="CtrlA"> 
    The other data is: {{sharedData.otherData}}, and mine is: {{sharedData.myData}} 
</div> 
<div ng-controller="CtrlB"> 
    <input type="text" ng-model="sharedAsWell.otherData"/> 
</div>

Благодаря @ippi, он воплотил его: Plnkr implementation

источник

2014-10-30 02:05:09

Избили меня к нему, будет использовать myApp.value ('DataHolder', {}), хотя делает его более читаемым для меня. –

Также хорошая идея ... еще лучше читать. –

И здесь плунж op обновлен после предложения Ивана. http://plnkr.co/edit/wI5aufzIFozvAQ3Zdz67?p=preview – ippi

Для чего-то вроде этого я обычно использую директиву по умолчанию, потому что вы вставляете функциональность в HTML-элементы, а не в сервис/фабрику. (Но это только личное предпочтение). Во всяком случае, вот WORKING FIDDLE директивы, которая полагается на localStorage.

.directive('persist', ['$parse' , function($parse) { 

    return { 

     restrict: 'A', 

     link: function($scope, elm, attrs) { 

      var set = function(val, type) { 
      localStorage.setItem(type, val); 
      }; 

      var get = function(type) { 
      return localStorage.getItem(type); 
      }; 

      elm.bind('change' , function(e) { 

      set(this.value, elm.prop('id')); 

      }); 

      var persistedVal = get(elm.prop('id')); 

      if (persistedVal) { 

      elm.val(persistedVal) 

      } 

     } 

     } 
}]);

источник

2014-10-30 02:19:31 bencripps

Держите формы ввода на AngularJS изменения маршрута

ответ

Смежные вопросы