AngularJS：使用同一控制器將數據從一個視圖傳遞到另一個視圖

Question

總結：

我在我的角度應用程序的view（ first ）中有一個表單，並且在提交時ajax調用成功響應后，它會將用戶重定向到view（ second ）。 該應用程序只有一個控制器（ for all view ）。 在此，用戶可以從圖（請在表格中的字段first ），其應該得到顯示在視圖（ second ）再次沒有在圖（a形式second ），其中用戶可以在表單中輸入的字段應該得到顯示在視圖上（ third ）。

由於所有的視圖（ first,second,third ）共享function.I創建一個相同的控制器service於set & get從一個視圖中的數據到另一個，並使用該服務在應用程序從一個視圖的數據發送到另一個視圖共享相同的控制器。

問題陳述 ：

我無法將每個表單數據存儲在單獨的變量中，因為我從整個應用程序的同一服務中獲取數據。

圖表：

由於服務是單身人士。 因此，當您轉到另一頁時，將不會重新創建它們。因此，當我從控制器調用dataService.setData()方法時，它將刪除服務中先前存儲的數據，並用新的更新，這給我帶來了問題。 我想單獨存儲所有視圖數據，而不是相互覆蓋。

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

然后當commit（）被觸發時，您可以調用$ 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進行導航。

希望能幫助到你。