Angular指令：判断ng-repeat完成后的回调事件

我们的app是Angular.js开发的，因为AngularJs是Google开源的前端JS框架确实Angularjs的双向数据绑定和依赖注入特性，为程序猿提供了很大的便利，尤其是ng-repeat在渲染数据时，不像ajax那样去拼接数据，但是也经常碰到这样的需求，就是当我们使用Jquery结合AngulraJs使用的时候，希望在ng-repeat完数据后，需要执行一段js脚本，希望能够捕获到AngularJs渲染完成页面的事件。

（需求是这样的，在限时秒杀的这一模块，数据从后台去取，产品的 个数不固定，从左往右实现滑动弹性效果和图片懒加载效果，当滑动到最后一个产品时，页面跳转到秒杀专题页面；）

要达到这个目的，我们需要为当前的app自定义directive（指令）

html

<div class="secKillPro swiper-container">
    <ul class="secWrap clearfix swiper-wrapper">

//这里就用了ng-repeat遍历数据，拿到产品的所有信息，再用在js里面定义好的on-finish-render-filters指令来监听

        <li class="fl swiper-slide" on-finish-render-filters ng-repeat="secK in seckills">

            <a ng-click="openDetail(secK.id)">
                <p class="secImg">

                   //这个是实现图片懒加载效果的，自定义lazy-src这个属性

                <img lazy-src="{{secK.ImageUrl}}" alt="产品图">
                </p>
                <div class="secMess">
                    <p>{{secK.ProductName}}</p>
                    <div class="secPrice clearfix">
                        <span class="fl">¥{{secK.Price}}</span>
                        <i class="fl">¥{{secK.SalesPromotion}}</i>
                    </div>
                </div>
            </a>
        </li>
    </ul>
</div>

然后，在我们需要监控的地方，加上该directive，可以用驼峰命名法

//当循环结束后执行
app.directive('onFinishRenderFilters', function ($timeout) {
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});

先用ajax渲染数据

// 获取秒杀产品 
$.ajax({
  type: 'get',
  url: requestHead + commConfig + '/mapi/mHomeApi/GetMillionKillProduct',
  dtaType: 'json',
  async: true,
  success: function (res) {
    console.log(res);

//处理了如果秒杀的产品下架后，就让模块隐藏

   if (res != '') {
      $scope.seckills = res;
      $scope.seckillslength = $scope.seckills.length;
    } else {
      $(".secondKill").hide();
    }
  },
  error: function () {

  }
});

用swiper实现在Anddroid上也有滑动效果，并且用onTouchEnd来监听是否滑动到了最后一个元素，如果是就执行页面的跳转效果

//限时秒杀 
$scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
  var swiper8 = new Swiper('.secKillPro', {
    slidesPerView: 3,
    observer: true, //修改swiper自己或子元素时，自动初始化swiper
    observeParents: true, //修改swiper的父元素时，自动初始化swiper

   //监听是否滑动到了最后一个元素

   onTouchEnd: function (swiper) {
      var snum = $(".secWrap li img").length,
        simg = $(".secWrap li img");
      for (var i = 0; i < snum; i++) {
        if (simg.eq(i).attr("src") == undefined) {

     //替换lazy-src为src，而src就是从后台数据取的的图片真实路径

     var lsrc = simg.eq(i).attr("lazy-src");
          simg.eq(i).attr("src", lsrc);
        }
      }
    }
  });
});

angularjs里面页面跳转的一个方法，还可以把产品额Id带过去，最多可以设置3个参数

//秒杀产品跳转详情页
  $scope.openDetail = function (id) {
    clicked('WJB2BAPP.html#/detail/' + id, false, false);
  }

这样就实现了想要的效果。

由于时间有限，暂且搁笔，写的不深，还望朋友们提出宝贵意见，一起进步，谢谢！