Angular JS-变量返回未定义

Question

我有一个简单易用的应用程序，您在新项目的part / view中输入一个项目，然后将新条目添加到主页part的UI中。

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

然后该服务具有getTasks函数，该函数用于访问主页上的数据。

我的问题是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>

新项目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">
                <a href="#/">
                  <button type="submit"
                         class="btn-lg btn-success addItemButton">
                     Add
                  </button>
        </form>
        <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</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

[提交按钮由<a>标记括起来时，将被忽略。在<a>指令有机会执行之前，ng-submit元素会更改视图。

ERRONEOUS

<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解析器将自动关闭未关闭的标签，但最好将其明确关闭。它使代码更易于理解，调试，维护，并避免意外行为。