最近在学习AngularJs，想知道有没有办法解决下面的问题。

我有一个名为 cardetails.html 的页面，其中显示了一些汽车详细信息，例如名称、品牌、型号等。数据从查看 session 存储的服务中填充。因此，当应用程序首次运行时，只有“添加”链接可见。单击“添加”会将用户导航到名为“CarDetailsForm.html”的页面，其中包含用于添加数据的表单。

提交表单后，数据将存储在 session 存储中，用户将被导航回 cardetails.html，此时汽车详细信息将与编辑链接一起显示。现在，我需要找到一种方法来重用“CarDetailsForm.html”进行编辑。当用户单击编辑链接时，表单应与表单元素中填充的数据一起打开。我已经完成了大部分工作，但不确定如何正确实现“编辑”功能。我发现以下链接很有用，但我试图避免两次创建相同的表单元素。

Angular JS - Edit In Place Content Editing

另一个问题是，当用户在浏览器上点击“后退”按钮从 cardetails.html 返回到“CarDetailsForm.html”时，数据应该仍然保留在表单上。我怎样才能做到这一点？

另外，我不确定是否有必要使用自定义指令来解决这个问题。任何帮助或建议将不胜感激。谢谢

用解决方案更新了代码(只需要使用模型绑定(bind))

下面是 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');
        };
    }
]);

最佳答案

与其使用两个加载相同 templateUrl 的唯一路由，不如使用一个路由接受 carDetailsInfo 对象并将其绑定(bind)到表单，但默认为空对象。然后，您为两个按钮操作调用相同的路由，将您的对象传递给编辑但不将其传递给新对象。

处理传递数据的示例代码:

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

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

$scope.formData = $routeParams;

来自 Angular Docs

关于javascript - 重用 html 表单在 Angularjs 中添加和编辑数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22076289/