Question

摘要：

我的角度应用程序中有一个表单（ first ），并且在提交的ajax调用成功响应时，它会将用户重定向到视图（ {{ 1}} ）。应用程序只有一个控制器（ second ）。在这里，用户可以在视图中输入表单中的字段（ for all view ），该视图应显示在视图上（ first ）＆amp;再次在视图中有一个表单（ second ），用户可以在表单中输入应显示在视图中的字段（ second ）。

由于所有视图（third）共享相同的控制器功能。我创建了一个first,second,third到service set &数据从一个视图到另一个并在整个应用程序中使用此服务将数据从一个视图发送到共享同一个控制器的另一个视图。

问题陈述：

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

图表：

因为服务是有角度的单身人士。因此，当你转到另一个页面时，他们不会被重新创建。因此，当我从控制器调用get方法时，它会删除服务中先前存储的数据，并使用新的数据进行更新，这会产生问题。我。我想分别存储所有视图数据，而不是互相覆盖。

Answer 1

使用具有“存储”值的工厂。为每个视图添加一个标识符，因此它将像哈希表一样工作。

.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'
}

因此，您将为第一个视图设置值和标识符。表示当前View的$ state对象将作为相应View的Id。而且你可以在剩下的视图中做同样的事情，而不会丢失数据。

Answer 2

在你的控制器中为每个不同视图创建一些键，让我们说：

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

当您调用setData方法时，收到要存储的data和key，请说

dataService.setData(data, keys.firstView)

并更新您的getData，以便选择您想要获得的数据

dataService.getData(keys.firstView)

现在你的dataService必须是这样的：

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

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

Answer 3

如果您使用的是ui-router，则可以使用参数将数据从一个州传递到另一个州。

例如你的三个州（加上一个抽象的父母）：

$stateProvider.state('parent', {
  abstract: true,
  param: {
    propertyOne: null,
    propertyTwo: null
  }
})
.state('parent.first', {
  controller: YourController,
  params: {
    propertyOne: null,
    propertyTwo: null
  }
})
...repeat for all the other states you want with the params

然后当submit（）被触发并且你可以调用$ state.go时，你可以传递变量：

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

Answer 4

最简单，最智能的解决方案是在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>

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

希望它有所帮助。

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

4 个答案: