AngularJS服务-在视图/控制器之间传递对象

Question

我正在努力了解AngularJS服务的概念，我对AngularJS还是比较陌生。

我本质上是试图在两个控制器/视图之间传递嵌套对象。

所以我的主页中有此部分，其中包含项目和任务。

homePage.html

<div class="col-8" ng-repeat = "item in toDoList">
    <h4>{{item.project}}</h4>
    <p>{{item.task}}.</p>
</div>

然后，我从新项目的一部分中获得了本节，这是添加新任务的地方。

newitem.html

<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>

    <button type="submit" class="btn-lg btn-success addItemButton">Add</button>
    <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
</form>

这是我的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: '/'
        });
});

主页控制器

app.controller('homePageCtrl', function ($scope) {

});

新项目页面的控制器

app.controller('newItemCtrl', function ($scope) {

    $scope.toDoList = [{
        project: null,
        task: null,
        done: false
    }];

    $scope.addNewToDoTask = function () {
        $scope.toDoList.push({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };
});

用于在各个视图之间保留数据的服务

app.service('newToDoTaskService', function () {

});

因此，本质上，当表单在新项目页面上提交时，它将带有相应输入值的新对象推送到toDoList数组中。

然后，我要使用该对象的项目和任务值来填充主页上的H4和p标签。

我知道实现此目标的一种好方法是使用服务，即使阅读文档后，我仍在努力理解概念。

[如果有人可以解释我如何实现这一目标并分解该过程，我将非常感激。

还值得一提的是，单击新项目页面上的添加或取消按钮，将使您导航到主页。

谢谢

Answer 1

用于在各个视图之间保留数据的示例服务

app.service('taskService', function () {
    var taskArr = [];
    this.getTasks = function() {
        return taskArr;
    };
    this.addTask = function(task) {
        taskArr.push(task)
    };
});

要使用，注入控制器中：

新项目页面的控制器

app.controller('newItemCtrl', function ($scope, taskService) {

    $scope.addNewToDoTask = function () {
        taskService.addTask({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };
});

主页控制器

app.controller('homePageCtrl', function ($scope, taskService) {

    $scope.toDoList = taskService.getTasks();

});

有关更多信息，请参阅

• AngularJS Developer Guide - Creating Services