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

Question

我很难理解 AngularJS 服务的概念，我对 AngularJS 比较陌生。

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

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

主页.html

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

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

新项目.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: '/'
        });
});

controller 主页

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

});

controller 新品页面

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 () {

});

所以基本上当在新项目页面上提交表单时，它会将新的 object 推入 toDoList 数组，以及相应的输入值。

然后我想做的是使用 object 中的项目和任务值来填充主页上的 H4 和 p 标签。

我知道实现这一目标的一个好方法是使用服务，即使在阅读文档后我也很难理解这个概念。

如果有人能解释我是如何实现这一目标并分解流程的，我将不胜感激。

还值得一提的是，单击新项目页面上的添加或取消按钮，将带您返回主页。

谢谢

Answer 1

跨视图持久化数据的示例服务

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

要使用，请注入 controller：

controller 新品页面

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

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

controller 主页

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

    $scope.toDoList = taskService.getTasks();

});

有关详细信息，请参阅

• AngularJS 开发者指南-创建服务