Javascript 重新解析角度路由数据并保持数据同步

我正在构建一个angular应用程序，它在表中重复一组项，并具有直接在表中内联编辑它们的功能。数据从HTTP API获取，该API由进行调用的服务处理，并将数据传递到注入的任何位置

问题在于，当修改项目时，我希望重新运行当前路由的解析函数并更新项目集。但当我这样做时，新更新的数据确实是从API中获取的，但没有在视图中更新。我怀疑我失去了对原始数组或其他内容的引用

目前，我们正在解决这个问题，方法是在更新项目时使用

$state.reload（）

，这将重新初始化控制器，从而重置当前分页页面和/或名称搜索字段等内容

我的配置和控制器的简化版本如下：

angular.module('myModule', ['ui.router']).config(function($stateProvider) {
  $stateProvider.state('dashboard.itemList', {
    url: '/items',
    controller: 'fooController',
    resolve: {
      items: ['$q', 'dataService', 'spinner', function($q, dataService, spinner) {
        return $q(function(resolve, reject) {
          spinner.start();

          // Resolves an array of objects from the server
          dataService.getItems().then(function(allItems) {
            spinner.stop();
            resolve(allItems);
          }, function(error) {
            spinner.stop();
            reject(error);
          });
        });
      }]
    }
  })
});

angular.module('myModule').controller('fooController', function($scope, $state, $stateParams, items) {
  $scope.items = items;
  $scope.inlineEdit = function(item) {
    // Call the PUT-method on the API to modify an item
    apiService.update(item).then(function() {
      // Reload the data on successful update
      $state.transitionTo($state.current, $stateParams, {
        reload: true,
        inherit: false,
        notify: false
      });
    });
  }
});

---

我走错方向了吗？对我的情况有更好的解决办法吗？

也许试试这个？我已将返回语句添加到您的解决方案和拒绝方案中，并采用了我首选的解决承诺的方法：

angular.module('myModule', ['ui.router']).config(function($stateProvider) {
  $stateProvider.state('dashboard.itemList', {
    url: '/items',
    controller: 'fooController',
    resolve: {
      items: ['$q', 'dataService', 'spinner', function($q, dataService, spinner) {
        spinner.start();
        // Resolves an array of objects from the server
        return dataService.getItems().then(function(allItems) {
            spinner.stop();
            return $q.resolve(allItems);
        }, function(error) {
            spinner.stop();
            return $q.reject(error);
        });
      }]
    }
  })
});

angular.module('myModule').controller('fooController', function($scope, $state, $stateParams, items) {
  $scope.items = items;
  $scope.inlineEdit = function(item) {
    // Call the PUT-method on the API to modify an item
    $q.when(apiService.update(item)).then(function() {
      // Reload the data on successful update
      $state.transitionTo($state.current, $stateParams, {
        reload: true,
        inherit: false,
        notify: false
      });
    });
  }
});

---

希望有帮助

您可能希望尝试将您的返回包装到它自己的函数中。这将阻止对

$q

对象进行任何缓存

resolve: {
  items: function() {
    return invokeTheQStuff() 
  }
}

---

通过将获取的数组存储在dataService中的一个变量中解决了这个问题，在获取新数据时，该变量将使用

angular.copy

方法重新填充。在服务中传递对阵列的单独引用，该服务现在一直处于同步状态

angular.module('myModule', ['ui.router']).config(function($stateProvider) {
  $stateProvider.state('dashboard.itemList', {
    url: '/items',
    controller: 'fooController',
    resolve: {
      items: ['$q', 'dataService', 'spinner', function($q, dataService, spinner) {
        return $q(function(resolve, reject) {
          spinner.start();

          // Resolves an array of objects from the server
          dataService.getItems().then(function() {
            spinner.stop();
            resolve(dataService.items);
          }, function(error) {
            spinner.stop();
            reject(error);
          });
        });
      }]
    }
  })
});

angular.module('myModule').controller('fooController', function($scope, items, spinner) {
  $scope.items = items;
  $scope.inlineEdit = function(item) {
    // Call the PUT-method on the API to modify an item
    spinner.start();
    apiService.update(item).then(function() {
      spinner.stop();
    });
  }
});

angular.module('myModule').service('dataService', function(apiService) {
  var items = [];
  var getItems = function() {
    apiService.get('items').then(function(itemsFromApi) {
      // Instead of resolving a promise with the result, im just setting the items array here instead
      items = angular.copy(itemsFromApi, items);
    })
  };

  return {
    getItems: getItems,
    items: items
  };
});