我有一个简单的应用程序，您在新项目的partial / view中输入一个项目，然后将新条目添加到主页partial的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);
};
});
最佳答案
当提交按钮由<a>标记括起来时，将被忽略。 <a>元素在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解析器将自动关闭未关闭的标签，但最好将它们明确关闭。它使代码更易于理解，调试，维护，并避免意外行为。