Question

考虑这个例子：

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之一。在字段中输入内容，然后单击相反的链接。该字段已清除。有没有办法保持输入？如果用户发布评论，则此功能非常有用，但必须先登录才能保存更改。用户将被重定向到登录页面，登录后将重定向回输入页面。

Answer 1

您可以使用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

Answer 2

对于类似的东西，我通常默认使用指令，因为您将功能注入HTML元素而不是服务/工厂。（但这只是个人偏好）。无论如何，这是一个依赖于localStorage的{{3}}指令。

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

          }

        }

      }
}]);

在路线改变AngularJS上保持表格输入

2 个答案: