Bảo tồn trạng thái với Giao diện người dùng góc-Bộ định tuyến

Question

Tôi có một ứng dụng có chế độ xem ngà sẽ gửi email đến số liên lạc được chọn từ danh sách liên lạc. Khi người dùng chọn "Người nhận", người dùng có thể tìm kiếm, lọc, v.v. "Gửi email" và "Danh sách liên hệ" là các phần tách html khác nhau được tải trong chế độ xem ng.

Tôi cần giữ trạng thái gửi biểu mẫu để khi người dùng chọn ai đó từ Danh sách liên hệ, nó quay trở lại cùng một điểm (và cùng một tiểu bang). Tôi đọc về các giải pháp khác nhau ($ rootScope, div ẩn bằng cách sử dụng ng-show, ...) nhưng tôi muốn biết liệu UI-router có giúp tôi với State Manager hay không. Nếu không, có các giải pháp sẵn sàng sử dụng khác không?

Cảm ơn!

Answer 1

Giải pháp tôi đã sử dụng là sử dụng dịch vụ làm lưu trữ dữ liệu/mô hình của tôi. chúng tồn tại qua các thay đổi của bộ điều khiển.

dụ

các dịch vụ sử dụng (mô hình của chúng tôi mà vẫn tồn tại qua những thay đổi controller)

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

sử dụng nó trong một bộ điều khiển

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

lợi thế khác của việc này là bạn có thể tái sử dụng mô hình của bạn trong các bộ điều khiển khác cũng dễ dàng.

Answer 2

Tôi đã tìm thấy Angular-Multi-View làm ơn trời cho trường hợp này. Nó cho phép bạn bảo toàn trạng thái trong một chế độ xem trong khi các chế độ xem khác đang xử lý tuyến đường. Nó cũng cho phép nhiều khung nhìn xử lý cùng một tuyến đường.

Bạn có thể thực hiện điều này bằng UI-Router nhưng bạn sẽ cần phải lồng các khung nhìn mà IMHO có thể trở nên xấu xí.

Answer 3

Tôi không chắc chắn nếu điều này được khuyến khích hay không, nhưng tôi đã tạo một StateService để lưu/tải thuộc tính từ phạm vi của bộ điều khiển của tôi. Nó trông giống như thế này:

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

    }); 
})(); 

Để sử dụng nó, tôi đặt một số mã ở phần cuối của bộ điều khiển của tôi như thế này:

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