AngularJS：使用同一控制器将数据从一个视图传递到另一个视图

摘要：

我的angular应用程序的视图中有一个表单（

），当ajax调用成功响应提交时，它会将用户重定向到视图（

second

）。应用程序只有一个控制器（

用于所有视图）。在这里，用户可以从视图（
）中输入表单中的字段，该字段应该显示在视图中（
）&视图中还有一个表单（
second
），用户可以在表单中输入应该显示在视图中的字段（
第三方）

所有视图（
first、second、third
）共享相同的控制器功能。我创建了一个
服务
，以
设置
&
从一个视图到另一个视图获取数据，并在整个应用程序中使用此服务将数据从一个视图发送到共享同一控制器的另一个视图

问题陈述：

我无法将每个表单数据存储在单独的变量中，因为我在整个应用程序中从同一个服务获取数据

图表：


因为服务在angular中是单例的。所以当您转到另一个页面时，它们不会被重新创建。所以，当我调用
dataService.setData（）时
方法它从控制器中删除服务中以前存储的数据，并用新数据更新，这给我带来了问题。我希望单独存储所有视图数据，而不是相互覆盖。
使用具有类似“存储”值的工厂。
为每个视图添加一个标识符，使其工作方式类似于哈希表

.factory('storeValue', function() {
    var valueStored= {};
    return {
        getValue: function(viewId) {
            return valueStored[viewId];
        },
        setValue: function(newValue,viewId) {
            valueStored[viewId] = newValue
        }
        deleteOrder: function(viewId) {
            delete valueStored[viewId];
        }
    };
})

假设这是一个视图的控制器，并且依赖于上述工厂

$scope.setData = function(){
    storeValue.setValue('value for First View', $state.current.name);
}

$scope.getData = function(){
    storeValue.getValue($state.current.name); // This will return the String 'value for First View'
}

因此，您将为第一个视图设置一个值和一个标识符。
表示当前视图的$state对象将用作相应视图的Id。
您可以对视图的其余部分执行相同的操作，而不会丢失数据。
在控制器中，为每个不同的视图创建一些键，例如：

this.keys = {
    "firstView": "firstView",
    "secondView": "secondView",
    "thirdView": "thirdView",
}

当调用
setData
方法时，接收要存储的
数据和
键

dataService.setData(data, keys.firstView)

并更新您的
getData
，这样您就可以选择您想要这样获取的数据

dataService.getData(keys.firstView)

现在，您的数据服务必须如下所示：

angular.module('app').service('dataService', function() {
    var s = {};
    function setData(data, key){
        s[key] = data;
    }

    function getData(key){
        return s[key];
    }
})

如果使用，则可以使用参数将数据从一个状态传递到另一个状态

例如，你的三个州（加上一个抽象家长）：

然后，当submit（）被激发时，您可以调用$state.go，您可以传递变量：

$state.go("seconds", { propertyOne: 'one', propertyTwo: 'two' }, { inherit:false });

最简单、最智能的解决方案是在AngularJS中使用作用域的父子关系。它比使用服务存储视图数据更强大

假设您有一个父控制器。在父控制器下您有
子控制器，如firstStepCtrl、secondStepCtrl、thirdStepCtrl和
依此类推。父控制器中的数据将在子控制器之间共享
所以如果你在父控制器上设置一个模型并绑定它
子控制器中的模型它将保持存储在父控制器中
在步骤之间导航时

示例代码

$scope.model={
   firstStep:{},
   SecondStep:{},
   thirdStep:{}
   currentStep:0,
   steps:['step1','step2','step3']
}



<div ng-controller="parentCtrl">

<div ng-include="model.steps[currentStep]">
</div>

</div>


<script type="text/ng-template" id="step1">
<div ng-controller="firstStepCtrl">
<h1>Step 1</h1>
<input type"text" ng-model="model.firstStep.name"/>
</div>
</script>

<script type="text/ng-template" id="step2">
<div ng-controller="secondStepCtrl">
<h1>Step 2</h1>
<input type"text" ng-model="model.SecondStep.name"/>
</div>
</script>


<script type="text/ng-template" id="step3">
<div ng-controller="thirdStepCtrl">
<h1>Step 3</h1>
<input type"text" ng-model="model.thirdStep.name"/>
</div>
</script>

$scope.model={
第一步：{}，
第二步：{}，
第三步：{}
当前步骤：0，
步骤：['step1'，'step2'，'step3']
}
第一步
步骤2
步骤3

正如您所见，每个步骤模型都保存在父控制器中，您可以轻松访问它。我使用了ng include而不是ui-router。您可以使用递增-递减currentStep进行导航

希望能有所帮助。
我以同样的方式创建了我的服务。请阅读我的问题陈述。
为每个视图添加一个标识符，这样它就会像一个哈希表一样工作。
能否请您用示例详细解释一下请再次检查，我用一个示例更新了答案。您如何更改视图？使用ui路由器可以拥有一个控制器吗对于一个视图，目前所有视图都有一个控制器。我完全同意，但如果我的应用程序中没有父控制器，会发生什么情况。谢谢你的回答，但我在一个对象中有很多属性，因此它不会按预期工作。
$scope.model={
   firstStep:{},
   SecondStep:{},
   thirdStep:{}
   currentStep:0,
   steps:['step1','step2','step3']
}



<div ng-controller="parentCtrl">

<div ng-include="model.steps[currentStep]">
</div>

</div>


<script type="text/ng-template" id="step1">
<div ng-controller="firstStepCtrl">
<h1>Step 1</h1>
<input type"text" ng-model="model.firstStep.name"/>
</div>
</script>

<script type="text/ng-template" id="step2">
<div ng-controller="secondStepCtrl">
<h1>Step 2</h1>
<input type"text" ng-model="model.SecondStep.name"/>
</div>
</script>


<script type="text/ng-template" id="step3">
<div ng-controller="thirdStepCtrl">
<h1>Step 3</h1>
<input type"text" ng-model="model.thirdStep.name"/>
</div>
</script>