Как гнездятся формы с угловыми?

Question

Я делаю приложение, которое не является 100% «одной страницей». Я использую только углы, как «помощника», так как я легко освою эту новую структуру JS. Множество моих приложений по-прежнему контролируется простым старым почтовым отправлением, а не угловым ресурсом или чем-то еще.

У меня есть внешняя форма, которая создается рельсами (имеет действие = "" и т. Д.).

Внутри этой формы у меня есть три «списка», вроде 3 разных списка списков задач, но все в одной форме, которая будет отправлена ​​на рельсы, когда они ее отправят.

В одном из списков пользователь увидит текстовое поле, в котором могут быть добавлены новые задачи. Я пытаюсь сделать так, чтобы пользователь мог нажать «ввести» в текстовое поле и добавить его в модель, но без отправки родительской формы.

Я читал, что могу сделать это с ngForm с угловым (чтобы он выглядел для гнездящихся форм), но я не уверен, как это сделать или что не так. Вот мой код:

main.js.coffee

app = angular.module("Messenger", []) 

app.factory "NewTasks", -> 
    NewTasks = [] 

@processNewCtrl = ["$scope", "NewTasks", ($scope, NewTasks) -> 
    $scope.tasks = NewTasks 

    $scope.addTask = -> 
    task = $scope.newTask 
    task.timestamp = new Date().getTime() 
    $scope.tasks.push(task) 
    $scope.newTask = {} 
] 

@processTomorrowCtrl = ["$scope", ($scope) -> 
] 

view.html.erb

<form action="/stuff"> 
    <!-- ... boring code--> 
    <div ng-controller="processNewCtrl"> 
     <!-- ... ng-repeat unordered list here for task in tasks --> 
     <div class="task"> 
      <angular ng-form ng-submit="addEntry()"> 
      <input checked="checked" disabled="disabled" type="checkbox"> 
      <input ng-model="newTask.description" type="text" autocomplete="off" placeholder="Additional Task description"> 
      </angular> 
     </div> 
    </div> 
    <!-- ... --> 
</form> 

Answer 1

ng-form Использование вместе с ng-submit=mySaveCallback()

mySaveCallback() должен обрабатывать перебирать данных, а затем вручную отправить на сервер (используя $http или $resource или что-то).

Обычно вы не пользуетесь традиционным <form action="submit.html"> в AngularJS, так как вы обычно хотите массировать данные перед его отправкой или каким-то образом обновить AngularJS. Использование традиционного запроса формы также заставит вас изменить страницу, которая также может быть нежелательной.

Теперь, если вы говорите о сохранении традиционного подхода (смена страниц и передачи данных POST), я честно не знаю, как это сделать с верхней части моего noggin в Javascript (так как это не вопрос, связанный с угловым выражением).

Но, на мой взгляд, вам лучше всего полностью конвертировать в асинхронное представление всех форм с помощью AngularJS и ng-submit. И с ними будет работать и в будущем.