AngularJs中，在ng-epeat后需要执行Js脚本怎么处理？

我们的app是用angularjs开发的，确实angualrjs在渲染数据上为程序猿提供了很大的便利，不用去像ajax那样拼接数据。但是有一次需求是这样的，在秒杀模块，产品个数不固定，左右滑动弹性效果，并且图片懒加载，当手指滑动到最后一张时页面跳转到限时秒杀专题页。

html

<div class="secKillPro swiper-container">
    <ul class="secWrap clearfix swiper-wrapper">
   //这里就是遍历数据，渲染页面，用自定义指令
   <li class="fl swiper-slide" on-finish-render-filters ng-repeat="secK in seckills">
            <a ng-click="openDetail(secK.id)">
                <p class="secImg">
   //图片的自定义属性
    <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>

css样式

 .secKillPro {
    overflow-x: auto;
    overflow-y: hidden;
    margin-top: 0.5rem;
}

  .secKillPro ul li {
    float: left;
    width: 6.2rem;
    text-align: center;
}

  .secKillPro .secImg {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto;
}

.secKillPro .secImg img {
    width: 100%;
    height: 100%;
}

  .secMess p {
    width: 5.2rem;
    font-size: 0.7rem;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 0 auto;
}

 .secPrice {
    margin: 0 auto;
    text-align: center;
    margin-left: 0.3rem;
}

 .secPrice span {
    font-size: 0.7rem;
    display: block;
    margin-top: 0.2rem;
    color: #333333;
    font-weight: bold;
    letter-spacing: 1px;
    width: 5rem;

}

 .secPrice i {
    display: block;
    font-size: 0.6rem;
    color: #707070;
    text-decoration: line-through;
    width: 4.45rem;
}

js部分

这时我们就需要定义一个指令了，在ng-repeat后来执行一些事情

app.directive('onFinishRenderFilters', function ($timeout) { //要用驼峰命名法
  return {
    restrict: 'A',
    link: function (scope, element, attr) {
      if (scope.$last === true) {
        $timeout(function () {
          scope.$emit('ngRepeatFinished');
        });
      }
    }
  };
});

定义好了之后我们来调接口，渲染页面，这里用的异步加载

  $.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实现产品左右滑动弹性效果

  $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循环再取一次
     for (var i = 0; i < snum; i++) {
          if (simg.eq(i).attr("src") == undefined) {
            var lsrc = simg.eq(i).attr("lazy-src");
            simg.eq(i).attr("src", lsrc);
          }
        }
      }
    });
  });

最后再实现滑动到最后一个时跳转页面到秒杀页，自己定义一个点击事件

  $scope.openDetail = function (id) {
    clicked('WJB2BAPP.html#/detail/' + id, false, false);
  }

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