2016-11-10 112 views
1

我怎樣才能保存數據從1視圖到另一個在angularjs?保存表單數據

我做$ rootScope

+0

還沒有能夠解決這個問題。我不想重新制作我的整個webapp,只是爲了能夠以某種方式保存表單輸入。必須有一個快速的方法來做到這一點。任何幫助表示讚賞! –

回答

1

從我所看到的,你用2個不同的控制器對每個視圖(或一個觀點,沒有根視圖)。

問題是Angular無法像這樣在控制器之間共享數據。

要麼你必須使用一個服務/工廠,或使用rootscope,但不是像你一樣,而與broadcastemit

如果我是你,我會使用的服務。

編輯在這裏,你走了,一個爲您服務:

(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。請注意,刷新頁面將刪除所有數據!

EDIT 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; 
     } 
    }); 
+0

我只有1個控制器,並將其傳遞給routeProvider以獲取詳細信息頁面。我真的不知道如何從我的代碼中設置服務。你能提供一些例子嗎?順便說一句,我應該上傳我的整個網站文件夾的地方給你看?也許當你看到你面前的頁面時會更容易。 –

+0

Nah我很好,我會在那裏發佈一個服務,告訴你如何使用它。你應該深入研究,你會在網上找到很多教程。好吧,等一下,我會編輯我的答案。 – trichetriche

+0

@rickastley在這裏你去看看編輯。 – trichetriche

0

我有一個應用程序,這是否更或更少。一項服務很好地修復了這一點,並創建了一種機制,以便您可以在應用中的任何位置執行此操作。

首先,我會建議不要試圖用範圍來管理這個。只需在你的控制器(myFormObj)上添加一個對象,並添加你想要的屬性(名稱,等級,序列號等)。

然後將表單的輸入字段綁定到該對象中的屬性(與範圍變量相反)。所以你的ng模型的東西看起來像myCtl.formObj.name,等等。

當用戶觸發改變視圖的事件時,通常在Service中(保存FormStateService或其他東西)將formObj的COPY(angular.copy)保存到旁邊。 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');

你明白了。

0

一種簡單的方法是創建一個值提供對象併發布關於範圍:

//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