AngularJS-Ng-Submit未执行函数调用

Question

我正在构建一个简单易用的应用程序，以便更好地理解AngularJS的一些基本原理。

我有两种看法，家和新项目。

在新的项目视图中，我有一个表单，它使用了一个函数，即ng submit调用addNewToDoTask。

当表单提交时，它应该执行这个函数，这个函数反过来会用输入值更新对象。

然后，我将通过服务使用这些值，在主页上显示新对象。

但似乎没有任何内容被推入taskArr数组。

我已经进行了调试，问题似乎是当我单击提交按钮时，ng-submit中的函数根本没有被调用。

按钮是submit类型，它也在表单中，所以我不确定我在这里做错了什么。

新项目html

<div ng-controller="newItemCtrl">
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form class="form" ng-submit="addNewToDoTask()">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="projectInput" placeholder="Enter a project title">
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="taskInput" placeholder="Enter your task details">
</div>
</div>
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</form>
<a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
<a href="#/"><button class="btn-lg btn-info addItemButton">Open Tasks</button></a>
</div>
</div>
</div>

app.module.js

var app = angular.module('ToDoListApp', ['ngRoute']);

app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider
.when("/", {
templateUrl: "app/home/homePage.html",
})
.when("/newItem", {
templateUrl: "app/newItem/newitem.html",
})
.otherwise({
redirectTo: '/'
});
});
//controller for home page
app.controller('homePageCtrl', function ($scope, newToDoTaskService) {

$scope.toDoList = newToDoTaskService.getTasks();
});
//controller for new item page
app.controller('newItemCtrl', function ($scope, newToDoTaskService) {
$scope.addNewToDoTask = function () {
newToDoTaskService.addTask({
project: $scope.projectInput,
task: $scope.taskInput,
done: false
});
$scope.projectInput = "";
$scope.taskInput = "";
};
});
//service to persist data across views
app.service('newToDoTaskService', function () {
var taskArr = [];
this.getTasks = function () {
return taskArr;
};
this.addTask = function (task) {
taskArr.push(task);
};
});

Answer 1

ng-submit函数未执行，因为提交按钮不是表单的一部分：

错误

<div ng-controller="newItemCtrl">
<div class="row header">
<div class="col-12">
<h1>DOINGO</h1>
</div>
</div>
<div class="row addNewItem">
<form class="form" ng-submit="addNewToDoTask()">
<div class="row projectInput text-center">
<div class="col-12">
<input type="text" ng-model="projectInput" placeholder="Enter a project title">
</div>
</div>
<div class="row taskInput text-center">
<div class="col-12">
<input type="text" ng-model="taskInput" placeholder="Enter your task details">
</div>
</div>
<!-- FORM tag closes early here -->
</div>
<div class="buttonRow row">
<div class="col-12 text-center">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
<!-- FORM CLOSING tag ignored -->
</form>
<a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
<a href="#/"><button class="btn-lg btn-info addItemButton">Open Tasks</button></a>
</div>
</div>
</div>

</div>关闭标记提前关闭<form>元素。HTML5解析器会忽略后续的</form>关闭标记。

<form>元素上的submit事件事件侦听器没有获取该事件，因为提交按钮从表单外部分派其提交事件。