重新使用HTML表單中Angularjs

Question

添加和編輯數據我一直在學習AngularJs最近，並想知道是否有解決以下問題的方法。

我有一個叫cardetails.html頁面顯示一些汽車的詳細信息，如名稱，品牌，型號等數據會從看起來在會話存儲服務填充。所以，當應用程序第一次運行時，只有「添加」鏈接可見。單擊「添加」將引導用戶進入一個名爲「CarDetailsForm.html頁面包含表單中添加數據。

當提交表單時，數據將被存儲在會話存儲，用戶將被導航回到cardetails.html，賽車的細節將是可見這次與編輯連結。現在，我需要找到一種重用'CarDetailsForm.html'進行編輯的方法。當用戶點擊編輯鏈接時，表單應該與表單元素中的填充數據一起打開。我已經完成了大部分工作，但不確定如何正確實施「編輯」功能。我發現下面的鏈接很有幫助，但我試圖避免兩次創建相同的表單元素。其他

Angular JS - Edit In Place Content Editing

的一個問題是，當只是一個編輯之後，用戶點擊瀏覽器「返回」從cardetails.html爲「CarDetailsForm.html」，數據應該仍然存在形式。我怎樣才能做到這一點？

而且，我不知道使用自定義指令是否有必要解決這個問題。任何幫助或建議將不勝感激。由於

更新與解決方案代碼（剛使用模型綁定）

下面是cardetails.html

<div ng-controller="carDetailsCtrl"> 
    <div>Car Details</div> 
    <div ng-show="hasData">  
     <ul> 
      <li>{{carDetails.name}}</li> 
      <li>{{carDetails.make}}></li>   
     </ul> 
    </div> 
    <div ng-hide="hasData"><a href="#carDetailsForm">add</a></div> 
    <div ng-show="hasData"><a href="#carDetailsForm">edit</a></div> 
</div> 

標記CarDetailsForm.html

<form ng-submit="submit()" ng-controller="carDetailsFormCtrl"> 
<input type="text" id="name" required="required" ng-model="formData.name"> 
<input type="text" id="make" required="required" ng-model="formData.make"> 
<input type="submit" id="submit" value="submit" /> 
</form> 

以下是我的腳本。

app.config([ 
    '$routeProvider', function ($routeProvider) { 
     $routeProvider.    
      when('/carDetailsForm', { templateUrl: 'CarDetailsForm.html' }). 
      //when('/carDetailsForm:carDetails', { templateUrl: 'CarDetailsForm.html' }). 
      otherwise({ 
       templateUrl: 'cardetails.html' 
      }); 
    } 
]); 


    app.factory('carDetailsService', function() { 
     return { 
      get: function(key) { 
       return sessionStorage.getItem(key); 
      }, 
      set: function(key, value) { 
       sessionStorage.setItem(key, JSON.stringify(value)); 
      }, 
      remove: function(key) { 
       sessionStorage.removeItem(key); 
      }, 
      clearAll: function() { 
       sessionStorage.clear(); 
      } 
     }; 
    }); 

app.controller('carDetailsCtrl', ['$scope', 'carDetailsService', function ($scope, carDetailsService) { 

    var carDetailsInfo = carDetailsService.get("carDetailsInfo"); 

    $scope.carDetails = JSON.parse(carDetailsInfo); 

    $scope.hasData = false; 
    if ($scope.carDetails) { 
     $scope.hasData = true; 
    } 
}]); 

app.controller('carDetailsFormCtrl', [ 
    '$scope', 'carDetailsService', '$location', '$routeParams', function($scope, carDetailsService, $location, $routeParams) { 
     $scope.formData = JSON.parse(carDetailsService.get("carDetailsInfo")) || {} ; 
     //$scope.formData = $routeParams; 
     $scope.submit = function() { 
      carDetailsService.set("carDetailsInfo", $scope.formData); 
      $location.path('/cardetails'); 
     }; 
    } 
]); 

Answer 1

而是具有加載相同templateUrl兩個獨特的路線，你應該有它接受一個carDetailsInfo對象，並將其綁定到形式，但是有一個空的對象作爲默認的一條路由。然後調用兩個按鈕動作相同的路線，傳遞你的對象的編輯而不是傳遞新。

樣本的代碼來處理傳送數據：

$routeProvider. 
     when('/editCarDetails:carDetailsInfo', { templateUrl: 'CarDetailsForm.html' }) 

app.controller('carDetailsFormCtrl', [ 
'$scope', 'carDetailsService', '$routeParams', '$location', 
      function($scope, carDetailsService, $routeParams, $location) { 

$scope.formData = $routeParams; 

從Angular Docs