Question

如何在angularjs中将数据从1个视图保存到另一个视图？

我做了$ rootScope

Answer 1

从我看到的情况来看，每个视图使用2个不同的控制器（或者一个用于视图，而没有用于根视图）。

问题是Angular不能像这样在控制器之间共享数据。

你要么必须使用服务/工厂，要么使用rootscope，但不能像你那样使用，而是使用broadcast和emit

如果我是你，我会使用服务。

编辑在这里，为您服务：

(function() {
'use strict';
angular
    .module('YourModuleName')
    .factory('CountriesService', CountriesService);
CountriesService.$inject = ['Your', 'dependencies', 'here', 'in', 'string'];
/* @ngInject */
function CountriesService(your, dependencies, here, not, in, string) {

    var service = {
        setCountries: setCountries,
        getCountries: getCountries
    };

    var vm = this;
    vm.countries = []; // Or maybe an object ?
    // ... List of other variables you need to store.

    return service;
    ////////////////
    function setCountries(listOfCountries) {
        vm.countries = listOfCountries;
    }

    function getCountries() {
        return vm.countries;
    }
}
})();

这将存储您的变量。在您的控制器中，您添加CountriesService作为依赖项，以节省您使用CountriesService.setCountries并加载您使用CountriesService.getCountries。请注意，刷新页面将删除所有数据！

编辑编号2 如果您害怕John papa guidelines，这是一个简单的服务，您可以在放置控制器的同一文件中使用：

    app.factory('CountryControl', function(your, dependencies) {

        var service = {
            setCountries: setCountries,
            getCountries: getCountries
        };


        this.countries = []; // Or maybe an object ?
        // ... List of other variables you need to store.

        return service;
        ////////////////
        function setCountries(listOfCountries) {
            this.countries = listOfCountries;
        }

        function getCountries() {
            return this.countries;
        }
    });

Answer 2

我有一个应用程序或多或少地执行此操作。服务可以很好地修复此问题并创建一种机制，以便您可以在应用中的任何位置执行此操作。

首先，我建议不要尝试使用范围来管理它。只需在控制器（myFormObj）上放置一个对象，然后添加您想要的属性（名称，等级，序列号等）。

然后将表单的输入字段绑定到该对象中的属性（而不是范围变量）。所以你的ng模型的东西看起来像myCtl.formObj.name，依此类推。

当用户触发更改视图的事件时，将该formObj的COPY（angular.copy）保存到一边，通常在Service中（想想FormStateService或其他东西）。 FormStateService只能保存一个简单的数组。

this.forms = { 'TheNameOfYourForm' : theFormObjToSave };

因此，当用户触发离开表单的事件时，您只需执行以下操作：

formStateSvc.forms ['NameOfMyForm'] = angular.copy（theFormObj）;

当用户返回原始视图并且控制器初始化时，您只需询问formStateSvc：

if ( 'NameOfMyForm' in formStateSvc.forms ) {
   this.formObj = formStateSvc.forms [ 'NameOfMyForm' ];
}

瞧，你原来的状态恢复了。

更强大的是，您可以创建“addForm，removeForm”方法等，您可以确保不会使用未定义的内容，并且可以将重新绑定到前一状态隐式（当您的表单的控制器进入时，只需要它恢复状态如果有任何恢复）。所以你的控制器就是：

this.formObj = formStateSvc.rebindOldDataIfItExists（'MyFormName'）;

你明白了。

Answer 3

一种简单的方法是创建一个值提供者对象并将其发布到范围：

//Create value provider object
app.value("FormObj", {});

app.controller("myController", function($scope, FormObj) {
    //Publish on scope
    $scope.FormObj = FormObj;
});

然后让ng-model指令使用该对象：

Name <input ng-model="FormObj.name"><br>
Rank <input ng-model="FormObj.rank"><br>
SerialNum <input ng-model="FormObj.ssnum"><br>

值对象是一个单例，它在应用程序的生命周期中持续存在。对象内容的更改将保留并可供其他控制器使用，并且可以在视图更改后继续存在。

DEMO on PLNKR

在视图中保存表单数据

3 个答案: