Javascript AngularJS-Ng提交未执行函数调用

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

我有两种观点，家和新项目

在NewItem视图中，我有一个表单，它在ng submit call addNewToDoTask上使用了一个函数

提交表单时，它应执行此函数，该函数将使用输入值更新对象

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

但似乎没有任何东西被推入taskArr阵列

我已经完成了调试，问题似乎是当我点击提交按钮时，ng submit中的函数根本没有被调用

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

新项目html

多因戈
添加

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);
    };
});

---

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>

多因戈
添加

结束标记提前关闭

元素。HTML5解析器忽略后续的

结束标记

---

元素上的

submit

事件侦听器未获取事件，因为submit按钮从表单外部发送其提交事件。

谢谢。在addNewItem div关闭之前，我已经移动了submit按钮。但是该函数仍然没有被调用？虽然HTML5解析器会自动关闭未关闭的标签，但最好显式关闭它们。它使代码更易于理解、调试、维护，并避免意外行为。