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

Question

总结：

我的 angular 应用程序的视图 (first) 中有一个表单，并且 ajax 调用成功响应提交它将用户重定向到视图 (second)。该应用程序只有一个控制器(for all view)。在这里，用户可以从视图（first）中输入表单中的字段，这些字段应该显示在视图（second) & 再次在视图中有一个表单(second) 用户可以在表单中输入应该显示在视图中的字段(third).

由于所有视图(first,second,third)共享同一个控制器function.I创建了一个service到set&get数据从一个视图到另一个视图，并在整个应用程序中使用此服务将数据从一个视图发送到共享同一控制器的另一个视图。

问题陈述：

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

图表：

因为服务在 angular 中是单例的。因此，当您转到另一个 page.So 时，它们不会被重新创建，当我从控制器调用 dataService.setData() 方法时，它会删除服务中先前存储的数据并更新为新数据，这会产生问题我。我想单独存储所有视图数据，而不是相互覆盖。

Answer 1

像这样使用具有 'stored' 值的工厂。为每个视图添加一个标识符，因此它将像哈希一样工作 Table.

.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。您可以对视图的其余部分执行相同的操作，而不会丢失数据。

Answer 2

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

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

并且当您调用 setData 方法时，接收要存储的 data 和 key，比方说

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];
    }
})

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 中使用作用域的父子关系。它比使用存储视图数据的服务更强大。

Suppose you have a parent controller. Under parent controller you have child controllers like firstStepCtrl,secondStepCtrl,thirdStepCtrl and so on.The data in parent controller will be shared across child controllers. So if you set a model on parent controller and bind that model in child controllers it will remain stored in parent controller while navigating between steps.

示例代码

$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.You 可以递增递减 currentStep 进行导航。

希望对您有所帮助。

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

AngularJS : Pass data from one view to another with in same controller

controller

data-sharing

angularjs

angular-services

angular-ui-router