用于发送隐藏数据字段的角度最佳做法

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模拟的单元测试中测试您的代码。
• ...