AngularJS Услуги - Передача объекта между представлениями / контроллерами. - PullRequest
Новая
       31

AngularJS Услуги - Передача объекта между представлениями / контроллерами.

1 голос
/ 23 февраля 2020

Я изо всех сил пытаюсь понять концепцию 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 на домашней странице.

Я знаю, что хороший способ добиться этого - использовать сервис, я просто пытаюсь понять концепцию даже после прочтения документации.

Если кто-то может объяснить, как я этого добиваюсь и прервать процесс, я был бы очень признателен.

Стоит также упомянуть нажатие кнопок добавления или отмены на странице нового элемента, которые будут перемещаться по вам. вернуться на главную страницу.

Спасибо

1 Ответ

1 голос
/ 23 февраля 2020

пример службы для сохранения данных между представлениями 

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

});

Подробнее см.

...