我使用的是智能表格,一旦创建控制器并显示表格,便想跳至特定页面。

我发现以下代码片段可以在stackoverflow上以编程方式here进行此操作:

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


“分页”是我的智能表格的分页div的HTML ID。直到控制器退出,因为IsolateScope返回“ undefined”,我才能调用它。所以我想在几毫秒后称它为确保表/页面已完全创建。

selectPage从我的自定义分页开始工作,如果我从页面底部的按钮调用它,则它起作用,但是如果从计时器中调用它,则它不起作用。我已经将源追溯到智能表的selectPage()和pipe()函数,但看不到区别-一种有效,而另一种无效。

请参阅Plunker:按下一个按钮,它将跳至预期的第5页。按另一个按钮设置一个3s计时器,该计时器应跳至第2页,并且什么也没有发生...

最佳答案

显然,有一种更好的方法可以从“外部”与智能表进行通信。

如果将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

关于javascript - 智能表格:以编程方式设置页面,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43707604/

10-11 23:35