AngularJS在視圖之間記住DOM狀態

Question

看起來像Angular在路由更改時重新呈現整個視圖。看到這個例子：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', []); 

JS：用戶輸入

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展開 - 摺疊插件。如果用戶展開一定數量的元素，離開視圖並返回，則狀態將重置爲一切已摺疊。

是否有可能讓Angular簡單地顯示/隱藏視圖，而不是在路由改變時擦除重新渲染？

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