2013-08-02 57 views
18

我有一個ng-view應用程序,可以將電子郵件發送給從聯繫人列表中選擇的聯繫人。 當用戶選擇「收件人」時,它會顯示他可以搜索,過濾等的另一個視圖/頁面。「發送電子郵件」和「聯繫人列表」是在ng視圖中加載的不同html部分。通過Angular UI-Router保存狀態

我需要保持發送表單狀態,因此當用戶從聯繫人列表中選擇某個人時,它會返回到同一個點(以及相同的狀態)。我讀過不同的解決方案($ rootScope,使用ng-show隱藏的div,...),但我想知道UI路由器是否可以幫助我使用狀態管理器。如果不是,還有其他即用型解決方案嗎?

謝謝!

+0

可能重複[AngularJS - 節能路線之間的數據(HTTP:/ /stackoverflow.com/questions/16802857/angularjs-saving-data-between-routes) –

回答

21

我已經使用的解決方案是使用服務作爲我的數據/模型存儲。他們堅持控制器的變化。

例如

用戶服務於一體的控制器使用它(我們的模型跨控制器的變化仍然存在)

app.factory('userModel', [function() { 
    return { 
     model: { 
      name: '', 
      email: '' 
     } 
    }; 
}]); 

function userCtrl($scope, userModel) { 
    $scope.user = userModel; 
} 

這樣做的另一個好處是,你可以重用你的模型在其他控制器中就像easly一樣。

+0

我使用過的服務。它看起來很好。但是如果模型是基於路由參數創建的(例如:$ routeParams.myId)呢? –

+2

您會將結果存儲在服務中而不是控制器中。其他所有內容都可以相同 – Anton

+2

看起來您的示例並不完整,您需要一種將服務模型中的[更改](更改爲其他控制器)的方法[http://go.unn.uni-migration.com/)。 [此示例](http://stackoverflow.com/a/16559855/168815)也是在完全從應用程序導航時保存狀態。 –

2

我發現Angular-Multi-View是這個場景的天賜之物。它可以讓您在一個視圖中保留狀態,而其他視圖則處理路線。它也讓多個視圖處理相同的路線。

你可以使用UI-Router來做到這一點,但你需要嵌套的恕我直言可以變醜。

8

我不知道這是否被推薦,但我創建了一個StateService來從我的控制器的作用域保存/加載屬性。它看起來像這樣:

(function(){ 
    'use strict'; 

    angular.module('app').service('StateService', function(){ 

     var _states = {}; 

     var _save = function(name, scope, fields){ 
      if(!_states[name]) 
       _states[name] = {}; 
      for(var i=0; i<fields.length; i++){ 
       _states[name][fields[i]] = scope[fields[i]]; 
      } 
     } 
     var _load = function(name, scope, fields){ 
      if(!_states[name]) 
       return scope; 
      for(var i=0; i<fields.length; i++){ 
       if(typeof _states[name][fields[i]] !== 'undefined') 
        scope[fields[i]] = _states[name][fields[i]]; 
      } 
      return scope; 
     } 

     // ===== Return exposed functions ===== // 
     return({ 
      save: _save, 
      load: _load 
     }); 

    }); 
})(); 

要使用它,我把一些代碼在我的控制器是這樣結尾:

angular.module('app').controller('ExampleCtrl', ['$scope', 'StateService', function ($scope, StateService) { 
    $scope.keyword = ''; 
    $scope.people = []; 

    ... 

    var saveStateFields = ['keyword','people']; 
    $scope = StateService.load('ExampleCtrl', $scope, saveStateFields); 
    $scope.$on('$destroy', function() { 
     StateService.save('ExampleCtrl', $scope, saveStateFields); 
    }); 
}]); 
+0

似乎是我的一個可能的解決方案。你有沒有證明這個過程的成功?我現在還需要實施一種機制來維護國家。 Greets Mario – SQueek

+1

我沒有在生產應用程序中使用它,但我的開發應用程序使用此代碼,似乎工作得很好。 –

+0

超級工作賈斯汀!我的同事對解決方案感到滿意!祝你週末愉快。 – SQueek