Я создаю простое приложение, чтобы лучше понять некоторые AngularJS основы.
У меня есть два вида: дом и новый предмет.
В новом представлении элемента у меня есть форма, которая использует функцию вызова ng-submit addNewToDoTask.
Когда форма отправлена, она должна выполнить эту функцию, которая, в свою очередь, обновит объект входными значениями.
Затем я буду использовать эти значения с помощью службы, чтобы показать новый объект на домашней странице.
Но похоже, что в массив taskArr ничего не вставляется.
Я прошел и отладил, и проблема, похоже, в том, что функция в ng-submit вообще не вызывается когда я нажимаю кнопку «Отправить».
Кнопка имеет тип submit, она также находится внутри формы, поэтому я не уверена, что я делаю здесь неправильно.
Новый элемент 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">
<button type="submit" class="btn-lg btn-success addItemButton">Add</button>
</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>
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);
};
});