如何使用 Angular Ui-router 实现过滤答案

【问题标题】：How to implement filtering with Angular Ui-router如何使用 Angular Ui-router 实现过滤
【发布时间】：2015-11-25 10:55:00
【问题描述】：

我们想使用 ui-router 实现分页（或过滤）。我们不想在每次 next/prev 参数更改时重新加载控制器。我们想监听一个事件并使用新的状态参数从 API 加载数据。

来自我们 routes.js 的代码

  $stateProvider.state('app.company.account.charges.index', {
    url: '?before&after',
    controller: 'ChargesCtrl',
    templateUrl: 'app/charges.html',
    reloadOnSearch: false,
    params: {
      before: { value: null, squash: true },
      after:  { value: null, squash: true },
    }
  });

我们的控制器：

function ChargesCtrl() {
  var loadCharges = function() {
    Charge.query({before: $state.params.before, after: $state.params.after}).then(function(charges) {
        $scope.charges = charges;
    });
  }

  $scope.goNext = function() {
    $state.go('app.company.account.charges.index', {before: $scope.pagination.before, after: null});
  };

  $scope.goPrevious = function() {
    $state.go('app.company.account.charges.index', {after: $scope.pagination.after, before: null});
  };

  $scope.$on('state params were changed', function() {
    loadCharges();
  });
}

如果由于 reloadOnSearch 为 false 而未引发 $stateChangeSuccess，我们如何跟踪状态参数的变化。

附：现在我们只是广播自己的事件来解决这个问题，但我正在寻找“自然”的解决方案:)

【问题讨论】：

嘿伙计，这可能对你有帮助：stackoverflow.com/questions/20884551/…
是的。这就是答案。谢谢！我仍然不喜欢这里提供的 hack：stackoverflow.com/a/29262392/2530416 :) 可能我们只会引发我们自己的事件来重新加载控制器中的数据。

标签： angularjs angular-ui-router

【解决方案1】：

Ui Bootstrap 有一个非常简单的方法来实现分页。并且与Ui-router集成也很容易！此链接将带您到分页帮助:) 玩得开心编码

【讨论】：

蒂齐亚诺，感谢您的回答。但这与分页无关。正如我所说，我们可以提出事件并做我们需要的事情。我们不需要添加额外的代码。

【解决方案2】：

感谢@krish，我找到了答案：Set URL query parameters without state change using Angular ui-router

在更新位置参数之前使用 hack 将 reloadOnSearch 选项更改为 false，然后在 $timeout 中将其恢复。

但是我认为使用这样的东西更明确：

$scope.goNext = function() {
    $state.go('app.company.account.charges.index', {before: $scope.pagination.before, after: null});
    $scope.$emit('charges.paginated');

};

$scope.$on('charges.paginated', function(event) {
    event.stopPropagation();

    loadCharges();
});

【讨论】：