发送隐藏数据字段的角最佳实践

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>

使用模板new_task中的项目id初始化对象

<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 controller中使用 project id 初始化对象

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

project id 4.在提交之前向 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模拟。
• ..。