运angular指令监听ng-repeat渲染完成后行脚本

事情被偶然用以异步获取数据并用ng-repeat遍历渲染了页面后行有操作,angular本身并无提供监听ng-repeat渲染完成
的命,所以用团结动手写。有更的同窗还应该了解,在ng-repeat模板实例之中会暴露出有特别性质$index/$first
/$middle/$last/$odd/$even,$index会趁每次遍历(从0开始)递增,当遍历到最后一个时,$last的价为
true,so,通过判断$last的值来监听ng-repeat的实施状态,怎么在遍历过程遭到拿到$last的价值:自定义指令

聊实例,我只是写了最要紧之片

//要循环的数据
$scope.data = [
    {
        str: 'a'
    },
    {
        str: 'b'
    },
    {
        str: 'c'
    }
]
//自定义指令repeatFinish
app.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            console.log(scope.$index)
            if(scope.$last == true){
                console.log('ng-repeat执行完毕')
            }
        }
    }
})
<div id="box">
    {{item.str}}
</div>

打开控制台,会打印出0,1,2,当$index =
2点上,$last值为true,ng-repeat渲染完毕 

so easy!

自然指令最好是会复用,在是令内写实际的事情逻辑不便宜复用,可以经让指令指定一个处理函数renderFinish

<div id="box">
    {{item.str}}
</div>

更经过指令的attr参数获取之处理函数

app.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            console.log(scope.$index)
            if(scope.$last == true){
                console.log('ng-repeat执行完毕')
                scope.$eval( attr.repeatFinish )
            }
        }
    }
})
//controller里对应的处理函数
$scope.renderFinish = function(){
    console.log('渲染完之后的操作')
}

attr获取到的特性只是一个字符串表达式,$scope.$eval方法是特意执行AngularJS表达式的,通过它们处理函数得以实施,这样,指令用当不同之地方,可传递不同的处理函数。

稍微事情比较复杂,可能ng-repeat渲染完成以后,需要实践多个操作而立即差不多单操作有差不多只前端完成,需要以angular的轩然大波,在repeatFinish指令的link函数内接触一个轩然大波,各位前端同学监听该事件做到各自的操作

app.directive('repeatFinish',function(){
    return {
        link: function(scope,element,attr){
            console.log(scope.$index)
            if(scope.$last == true){
                console.log('ng-repeat执行完毕')
                //向父控制器传递事件
                scope.$emit('to-parent');
                //向子控制器传递事件
                scope.$broadcast('to-child');
            }
        }
    }
})
//父控制器中监听事件
$scope.$on('to-parent',function(){
    //父控制器执行操作
})

//子控制器中监听事件
$scope.$on('to-child',function(){
    //子控制器执行操作
})

如何以现阶段控制器下监听到该事件也?angular没有于当前控制器传递事件的点子,可以事先往父(子)控制器传递事件,父(子)控制器监听到事件后回向子(父)控制器传递事件。

加:IE8可以一直当要素上之所以命令ng-if=”$last &&
renderFinish()”,当然IE8+也可以这么用

同句子话AngularJS总结:指令是angular的着力职能之一,用好了经济,监听ng-repeat执行状态才是她功效的冰山一角吧

 

相关文章