Javascript 角度JS-返回未定义的变量

我有一个简单的应用程序，您可以在new item partial/视图中输入一个项目，然后在主页的UI中添加一个新项目

我有一个服务，允许我在两个控制器/视图之间共享这些项目/任务的数据，该服务在新项目页面上提交表单时将数据添加到taskArr

然后，该服务有一个gettask函数，用于访问主页上的数据

我的问题是toDoList变量返回的是未定义的，而不是带有嵌套对象的数组

主页HTML

<div ng-controller= "homePageCtrl">
<div class="row header">
    <div class="col-12">
        <h1>DOINGO</h1>
        <p>0 Open Tasks</p>
    </div>
</div>
<div class="row toDoList">

    <div class="row newItem"  ng-repeat ="item in toDoList">
        <div class="col-2">
            <button class="itemComplete btn"><i class="far fa-check-circle fa-2x"></i></button>
        </div>
        <div class="col-8">
            <h4>{{item.project}}</h4>
            <p>{{item.task}}.</p>
        </div>
        <div class="col-2">
            <button class="btn deleteItem"><i class="far fa-times-circle fa-2x"></i></button>
        </div>
    </div>

</div>

<div class="row addItemRow">
    <div class="col-12 text-center">
        <a href="#/newItem"><button type="button" class="btn btn addItem">
                <i class="fas fa-plus-circle fa-3x"></i>
            </button></a>
    </div>
</div>
</div>

---

当提交按钮被

标记包围时，它将被忽略。

元素在执行

ng submit

指令之前更改视图

错误的

<form class="form" ng-submit="addNewToDoTask()">

    <!-- ... -->

    <div class="buttonRow row">
        <div class="col-12 text-center">
            <a href="#/">
              <button type="submit" class="btn-lg btn-success addItemButton">
                 Add
              </button>
</form>

添加

请注意，虽然HTML5解析器将自动关闭未关闭的标记，但最好显式关闭它们。它使代码更易于理解、调试、维护，并避免意外行为

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

<form class="form" ng-submit="addNewToDoTask()">

    <!-- ... -->

    <div class="buttonRow row">
        <div class="col-12 text-center">
            <a href="#/">
              <button type="submit" class="btn-lg btn-success addItemButton">
                 Add
              </button>
</form>