Smart Table：以编程方式设置页面

Question

我正在使用 Smart Table 并希望在创建控制器并显示 table 后跳转到特定页面。

我在 Whosebug 上找到了这段代码以编程方式执行此操作：

angular.element( $('#pagination') ).isolateScope().selectPage(pageNumber);

"pagination"是我的SmartTable分页div的HTMLid。在控制器作为 isolateScope returns "undefined" 退出之前，我无法调用它。所以我想我会在几毫秒后调用它以确保 table/page 已完全创建。

selectPage 根据我的自定义分页工作，如果我从页面底部的按钮调用它，它会工作，但如果它是从计时器调用，则不会。我已经追踪到 Smart Tables selectPage() 和 pipe() 函数的来源，但我看不出区别 - 一个有效，另一个无效。

看到Plunker：按下一个按钮，它会按预期跳转到第5页。按另一个按钮设置一个 3 秒计时器，它应该跳转到第 2 页，但没有任何反应...

Answer 1

显然，'outside'.

有更好的方式与 smart-table 通信

如果将 st-table 指令移动到外部 div（在本例中为正文）：

<body ng-controller="mainCtrl" st-table="displayed">

然后我们可以创建一个需要插件控制器并使用其功能的指令：

app.directive('handlePagination', function ($timeout) {
    return {
        require: '^stTable',
        restrict: 'AE',
        transclude: true,
        template: '<button class="btn btn-success btn-xs" ng-click="" ng-transclude></button>',
        scope: {
          goToPage: '@',
          delay: '@'
        },
        link: function link(scope, element, attrs, controller) {
            scope.delay = scope.delay || 0;
            element.on('click', function() {
              var page = scope.goToPage; 
              if (page > 0 && page <= controller.tableState().pagination.numberOfPages) {
                $timeout(function() {
                   controller.slice((page - 1) * controller.tableState().pagination.number, controller.tableState().pagination.number);
                }, scope.delay) 
              }
            })
        }
    };
});

看到这个plnkr

Smart Table：以编程方式设置页面

Smart Table: set page programmatically

javascript

angularjs

smart-table