Ionic 用 angular 指令监听循环 ng-repeat 渲染结束后执行脚本

有时我们会用到类似 slider 的 js 插件来美化界面，然而，slider 的初始化前，需要用到的html渲染完毕才能起作用。这个时候我们需要做的就是在 slide 渲染完毕后再初始化 slider 脚本，使得 slider 正常工作。

Ionic 里我们用到 ng-repeat 来进行循环渲染，这里就说是如何利用 angular 指令监听循环 ng-repeat 渲染结束后执行脚本。

html 处，我们定义循环结束后调用 initSlider() 这个函数：

<div class="slider">
    <div class="slide" ng-repeat="post in posts track by $index" href="#/tab/posts/{{post.id}}" track repeat-finish="initSlider()" ></div>
<div>

再通过指令的attr参数获取这个处理函数：

myApp.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            //console.log(scope.$index)
            if(scope.$last == true){
                scope.$eval( attr.repeatFinish );
            }
        }
    }
})

然后在 controller 里边用 initSlider() 这个函数来添加初始化 Slider 的脚本：

myApp.controller('myCtrl', function($scope){
    $scope.initSlider= function(){
        console.log('循环完毕');
        ...
        ..
        .
    }
})