在 angular 中路由时将数据保存在控制器中

Question

我有以下问题：

在 AngularJS 应用程序中，我使用 $routeProvider 将不同的部分加载到应用程序中

config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/view1', {templateUrl: 'partials/partial1.html', controller: 'MyCtrl1'});
  $routeProvider.when('/view2', {templateUrl: 'partials/partial2.html', controller: 'MyCtrl2'});
  $routeProvider.when('/users', {templateUrl: 'partials/users.html', controller: 'UserCtrl'});
  $routeProvider.otherwise({redirectTo: '/view1'});
}]);

在我的 UserCtrl 中，我显示了我可以操作的用户列表。我从 json 中读取了用户列表，它看起来像这样：

{"users":[{"id":1,"name":"test user 2","mail":"test@gmail.com","ringer":true,"active":true},{"id":2,"name":"test user 1","mail":"test@page.com","ringer":false,"active":true},{"id":3,"name":"admin","mail":"admin@example.com","ringer":false,"active":true}]}

在users.html我有控制器，它调用服务加载数据

    'use strict';

/* Controllers */

angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function() {

  }])
  .controller('MyCtrl2', [function() {

  }])
  .controller('UserCtrl', ['$scope', 'UsersService', function($scope, UsersService) {
    //alert(UsersService.fetchData().length);
    UsersService.fetchData().then( function( data ){
      // Do whatever you want with data, like:
      $scope.users = data.users;
    });

    this.users = $scope.users;
    this.selected = [];
    this.searchTerm = '';

    $scope.selected = this.selected;    
  }])
;

最后是服务：

    'use strict';

/* Services */


// Demonstrate how to register services
// In this case it is a simple value service.
angular.module('myApp.services', []).
  value('version', '0.1')
  .factory('UsersService', function($http, $q) {

  var data = [];

  function fetchData() {
    var deffered = $q.defer();
    if ( _isDataPresent() ) {
      deffered.resolve( _returnData() );
    } else {
      //var deffered = $q.defer();
      $http.get('php/users.php')
      .success(function (d) {
        deffered.resolve(d);
        data = d.users;
      });
      return deffered.promise;
    }
  }

  function _isDataPresent() {
    return data.length;
  }

  function _returnData() {
    return data;
  }

  return { fetchData : fetchData };

});

我遇到的问题如下：每次加载 users.html 时，数据都会从 json 文件重新加载。我只想加载一次数据并将它们保存在我的控制器中。现在，当我对数据进行一些更改，切换到不同的视图并返回时，所有更改都丢失了。

如有任何帮助，我们将不胜感激。

谢谢，兹拜内克

Answer 1

这是我的意思的一个简单示例：

.factory( 'UsersService', function( $http, $q ) {

  var users = [];

  function fetchUsers() {
    var deffered = $q.defer();
    if ( _areUsersPresent() ) {
      deffered.resolve( _getUsers() );
    } else {
      $http.get('php/users.php')
      .success(function (response) {
        deffered.resolve(response.users);
        data = d.users;
      });
      return deffered.promise;
    }
  }

  function _areUsersPresent() {
    return ( users.length() ) ? true : false;
  }

  function _getUsers() {
    return users;
  }

  function setUsers( newUsers ) {
    users = newUsers;
  }

  return { fetchUsers : fetchUsers, setUsers : setUsers };

});

您可以在控制器上使用它作为

UsersService.fetchUsers().then( function( users ){
  // Do whatever you want with data, like:
  $scope.users = users;
});

而且，无论何时更新控制器上的用户，都必须更新服务的内容：

// Doing operations with $scope.service, when finish with them:
UsersService.setUsers( $scope.users );

在 angular 中路由时将数据保存在控制器中

keep data in controller while routing in angular

angularjs

angular-services

angularjs-ng-route