Question

我正在使用AngularJS和OData Controller构建应用。我使用Angular-ui创建了分页。

<div class="table" ng-controller="MyCtrl as ctrl">
   <!-- bunch of data to be shown here - The table stuff --> 
    <uib-pagination class="pagination" 
     total-items="ctrl.totalItems"
     items-per-page="10"
     max-size="10"
     rotate="false"
     boundary-links="true"
     ng-model="ctrl.currentPage"
     ng-change="ctrl.pageChanged(ctrl.currentPage)">
    </uib-pagination>
</div>

这很完美。发生了什么事情，当用户进入下一页，选择一个表格查看详细信息视图，然后点击“完成”＃39;或者＆＃39;取消＆＃39;或者从表格视图的详细视图中退出的任何按钮，视图被设置回第一页而不是将它们带回到之前的任何页面。

所以，我最终做的是使用ui-router创建一个状态。这是ui-router状态

.state('Claims', {
                url: '/Claims?page',
                templateUrl: baseUrl + 'Scripts/App/Views/Template/denied/denied-claims-table.html',
                params: {
                    page: {
                        value: '0',
                        squash: true
                    }
                }
            })

            .state('Detail', {
                url: '/Claims?page&id/detail',
                templateUrl: baseUrl + 'Scripts/App/Views/Template/denied/denied-claims-details-panel.html',
                params: {
                    page: {
                        value: '0',
                        squash: true
                    },
                    id: {
                        value: '0',
                        squash: true
                    }
                }
            })

这是我的控制者：

deniedClaimsApp.controller('DeniedClaimsController', [
    '$scope',
    '$state',
    '$stateParams',
    'DeniedClaimsService',
    'SharedDataService',
    function ($scope, $state, $stateParams, DeniedClaimsService, SharedDataService) {

        var vm = this;
        var claimBK = {};
        vm.claims = {};
        vm.totalItems;        
        vm.numPages = 10;

        vm.currentPage = parseInt($stateParams.page, 10) || 1;

        console.log('Current Page: ' + $stateParams.page);
        activate();

        SharedDataService.registerObserver(activate);

        function activate() {

            $scope.$emit('LOAD');

            vm.isCollapsed = true;
            console.log("Page set to : " + vm.currentPage);

            //vm.currentPage = DeniedClaimsService.getCurrentPage();
            vm.currentPage = $stateParams.page;
            vm.claims = DeniedClaimsService.getClaims(vm.currentPage);
            angular.copy(vm.claims, claimBK);

            resolve();
            $state.go('.', { page: vm.currentPage }, { notify: false });
        }



        function resolve() {
            vm.currentPage = $stateParams.page; //adding this didn't help either
            console.log("Resolve: " + vm.currentPage);
            vm.claims.$promise.then(function (data) {
                vm.totalItems = data.count;
                $scope.$emit('UNLOAD');
            });
        }

       vm.pageChanged = function (page) {

/*
 This is where page is always 1. For some reason, when the page number is changed from the url, it raises the page change event, but the ng-model in uib-pagination doesn't change to the page set in the url. It always stays 1 and changes the page back to the first page
*/
            $scope.$emit('LOAD');

            //vm.currentPage = $stateParams.page;
            console.log("New page: " + vm.currentPage);
            console.log('changing page');
            vm.claims = DeniedClaimsService.pageChanged(vm.currentPage);
            vm.claims.$promise.then(function (data) {

                $scope.$emit('UNLOAD');
            });
            console.log("Changing State to: " + vm.currentPage);
            $state.go('.', { page: vm.currentPage }, { notify: false });
            console.log("Changing pagination: " + vm.currentPage);
            //vm.currentPage = $stateParams.page;

        }

因此，控制器仅用于更改页面，以及为简洁起见而未在此处显示的其他一些内容。当我使用＆＃39; Next＆＃39;更改页面时或者＆＃39;上一页＆＃39;按钮，页面变化很好。但是当我从网址更改页面并从$stateParams.page获取页面时，无论我在哪个页面，它都会将页面更改回第一页。我认为这与页面更改事件有关使用ng-change。所以，我将uib-pagination ng-change更改为ng-click="ctrl.pageChanged(ctrl.currentPage)。如果页面编号在网址中设置为/Claims?page=5，那么这样做确实会更改页面，然后它会将我带到第5页，但它并没有更改ng-model uib-pagination 1}}。即使表格显示第5页的数据，仍保持为1。因此，在从网址更改为第5页后，如果我通过点击“下一步”更改页面，则需要转到第2页第6页。我做错了什么？为什么该模型不随同一模型的值变化而变化？

从url设置时无法进行页面更改工作

0 个答案: