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