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模拟。
...

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

1 个答案: