详解angular分页插件tm.pagination二次触发问题解决方案

 更新时间:2018年07月20日 14:29:12   作者:晴朗sunny  
这篇文章主要介绍了详解angular分页插件tm.pagination二次触发问题解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

今天在学习angularjs的分页插件时遇到了一个前端的问题,谷歌浏览器开发者模式调试的时候发现每次点击分页刷新按钮会触发两次后台请求,ajax向后台发送了两次请求,这对于强迫症患者来说是一个比较恶心和感到不舒服的事情。

于是在网上也找到了靠谱的解决方案:http://jqvue.com/tm.pagination/ ,且在此维护者的这个版本中解决了此问题,同时注意 angularjs版本的配合使用。但是不满足于现状,我还是找到了自己的解决方案,不打针不吃药,就这么简单!粗暴!It's time to show the code!!

var app = angular.module("shopping", [ 'pagination' ]);
  app.controller("brandController",
      function($scope, $http) {
        $scope.reloadList = function() {
          //切换页码 
          $scope.findPage($scope.paginationConf.currentPage,
              $scope.paginationConf.itemsPerPage);
        }
        $scope.reload = true;
        //分页控件配置 
        $scope.paginationConf = {
          currentPage : 1,
          totalItems : 10,
          itemsPerPage : 10,
          perPageOptions : [ 10, 20, 30, 40, 50 ],
          onChange : function() {
            if(!$scope.reload) {
              return;
            }
            $scope.reloadList();//重新加载 这个方法会重复调用两次
            $scope.reload = false;
            setTimeout(function() {
              $scope.reload = true;
            }, 200);
          }
        };
        //分页
        $scope.findPage = function(page, rows) {
          
          $http.get(
              '../goods/findAll?pageNum=' + page + '&pageSize='
                  + rows).success(function(response) {
            $scope.list = response.rows;
            $scope.paginationConf.totalItems = response.total;  //更新总记录数
          });
        }

      });

核心代码我已经用黑色字体加粗标识出来了,定义一个全局变量reload存于$scope上,第二次触发加载reload的时候就发现这个全局变量为false状态,则直接return。之后再用定时器setTimeout在200毫秒之后将其归位。下一次刷新不会受影响且每次刷新只会发送一次ajax,提升请求质量与用户体验。

注:此方法不仅限于实现ajax的请求重复发送问题,其他类似的重复行为可参考本实例的实现思想,注意全局变量的合理使用,减少内存浪费问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • angular2倒计时组件使用详解

    angular2倒计时组件使用详解

    这篇文章主要为大家详细介绍了angular2倒计时组件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • 移除AngularJS下URL中的#字符的方法

    移除AngularJS下URL中的#字符的方法

    这篇文章主要介绍了移除AngularJS下URL中的#字符的方法,AngularJS是一款高人气JavaScript库,需要的朋友可以参考下
    2015-06-06
  • angular.element方法汇总

    angular.element方法汇总

    本文主要给大家汇总了一下angular.element的方法,十分的详细,这里推荐给大家 参考下。
    2015-01-01
  • Angular获取ngIf渲染的Dom元素示例

    Angular获取ngIf渲染的Dom元素示例

    这篇文章主要为大家介绍了Angular获取ngIf渲染的Dom元素示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 深入聊一聊Angular开发的内容

    深入聊一聊Angular开发的内容

    使用Angular开发需要非常多的前置知识,比如TypeScript、RxJS等,所以学习成本比较高,下面这篇文章主要给大家关于Angular开发内容的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • Angular.js中下拉框实现渲染html的方法

    Angular.js中下拉框实现渲染html的方法

    这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起来学习学习吧。
    2017-06-06
  • Angular.js去除页面中显示的空行方法示例

    Angular.js去除页面中显示的空行方法示例

    这篇文章主要介绍了Angular.js去除页面中显示的空行方法,文中给出了详细的示例代码供大家参考学习,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-03-03
  • Angularjs 1.3 中的$parse实例代码

    Angularjs 1.3 中的$parse实例代码

    本文通过实例代码给大家介绍了angularjs $parse的相关知识,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-09-09
  • Angular4开发解决跨域问题详解

    Angular4开发解决跨域问题详解

    本篇文章主要介绍了Angular4开发解决跨域问题详解。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 解析AngularJS中get请求URL出现的跨域问题

    解析AngularJS中get请求URL出现的跨域问题

    本文主要介绍了AngularJS中get请求URL出现跨域问题。需要的朋友可以参考下
    2016-12-12

最新评论