javascript - Angular JS - 变量返回未定义

Question

我有一个简单的应用程序，您可以在新项目部分/ View 上输入一个项目，然后在主页部分的 UI 上添加一个新条目。

我有一个服务，允许我在两个 Controller / View 之间共享这些项目/任务的数据，当在新项目页面上提交表单时，该服务将数据添加到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 之前的 View 指令有机会执行。

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