AngularJS запомнить Состояние DOM между представлениями

Question

Похоже, что угловое переназначает весь вид при изменении маршрута. Смотрите пример: http://jsfiddle.net/RSHG8/1/

HTML:

<div class="nav"> 
    <a href="#/one">One</a><a href="#/two">Two</a> 
</div> 
<div ng-app="app" id="ng-app"> 
    <div ng-view=ng-view></div> 
</div> 

var app = angular.module('app', []); 

ЯШ:

app.config(function ($routeProvider) { 
    $routeProvider.when('/one', { 
     template: 'Template {{template}}<br>Enter some text: <input type="text" /> then click "Two"', 
     controller: 'one' 
    }) 
     .when('/two', { 
     template: 'Template {{template}}<br>Click back to view "One" to see changes undone', 
     controller: 'two' 
    }) 
     .otherwise({ 
     redirectTo: '/one' 
    }); 
}); 

app.controller("one", function ($scope) { 
    $scope.template = "One"; 
}); 

app.controller("two", function ($scope) { 
    $scope.template = "Two"; 
}); 

Текст, введенный пользователем забывается, когда переключение между видами. Это будет проблемой и для негласных вещей. Например. плагин jQuery expand-collapse. Если пользователь расширяет определенное количество элементов, выходит из представления и возвращается, состояние будет сброшено, чтобы все рухнуло.

Возможно ли получить угловое представление простого/скрытого вида, а не стереть повторную визуализацию при изменении маршрута?

Answer 1

Вы можете попробовать назначить ng-модель входному тегу и сохранить значение в родительском контроллере.

HTML

<div class="nav"> 
    <a href="#/one">One</a><a href="#/two">Two</a> 
</div> 
<div ng-app="app" id="ng-app"> 
    <div controller="AppCtrl"> 
     <div ng-view=ng-view></div> 
    </div> 
</div> 

var app = angular.module('app', []); 

JS

app.config(function ($routeProvider) { 
     $routeProvider.when('/one', { 
      template: 'Template {{template}}<br>Enter some text: <input type="text" ng-model="$parent.inputValue" /> then click "Two"', 
      controller: 'one' 
     }) 
      .when('/two', { 
      template: 'Template {{template}}<br>Click back to view "One" to see changes undone', 
      controller: 'two' 
     }) 
      .otherwise({ 
      redirectTo: '/one' 
     }); 
    }); 

    app.controller("AppCtrl", function AppCtrl($scope) { 
     $scope.inputValue = ""; 
    }); 

    app.controller("one", function ($scope) { 
     $scope.template = "One"; 
    }); 

    app.controller("two", function ($scope) { 
     $scope.template = "Two"; 
    });