用於發送隱藏數據字段的角度最佳做法

Question

我有一個小型角度應用程序，它具有用於創建任務的表單模板，其中包含父項目。項目實例由路由控制，因此用戶不輸入/編輯這些數據。現在，我仍然需要將project id的表單發送到後端。

模板：

<form name="newTaskForm"> 

    <input ng-model="new_task.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /> 
    <a class="btn btn-success" ng-click="createTask(new_task)">create</a> 

</form> 

據我可以告訴有至少4個發送project id的直線前進的方法。

1.使用模板中的隱藏字段

<form name="newTaskForm"> 

    <!-- HIDDEN --> 
    <input ng-model="new_task.project" type="hidden" id="project" name="project" class="form-control" value="{{ project.id }}" /> 
    <!-- END HIDDEN --> 

    <input ng-model="new_task.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /> 
    <a class="btn btn-success" ng-click="createTask(new_task)">create</a> 

</form> 

2.初始化與項目ID的new_task對象模板

<form name="newTaskForm" ng-init="new_task.project = project.id"> 

    <input ng-model="new_task.title" type="text" id="title" name="title" class="form-control" placeholder="Title" required /> 
    <a class="btn btn-success" ng-click="createTask(new_task)">create</a> 

</form> 

3.初始化new_task對象與project id在controller

.controller('TaskCtrl', function ($scope, project) { 
    $scope.project = project; 
    $scope.new_task = {project: $scope.project.id} 
    ... 
}); 

4.添加project id到new_task對象提交

.controller('TaskCtrl', function ($scope, project) { 

    $scope.createTask = function(obj) { 
     // add project id 
     obj.project = $scope.project.id; 
     // $http submission 
     ... 
    }; 
    ... 
}); 

我的問題是前 - 有什麼關係？是否有一個實現此目的的首選方法？有沒有更好的辦法？

任何幫助非常感謝。

Answer 1

選項3 - 可能會進行一些優化：委派知識如何創建新任務到服務。

爲什麼？

• 無論你用什麼樣的UI來創建你的任務。您的模型中始終有一項有效的任務。
• 如果你改變你的UI，你不能忘記設置任何隱藏的字段或ng-init - 因爲你不需要它們。
• 因爲你總是有一個有效的任務，所以你不能忘記在將任務發佈到服務器之前使其有效。
• 如果您的任務變得越來越複雜，您只需更改控制器（或者如果您決定使用其中的服務）
• 您可以在沒有任何UI或$ http模擬的單元測試中測試您的代碼。
• ...