AngularJS动用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!

理所当然指令最好是能够复用,在那个命令内写实际的工作逻辑不便宜复用,能够透过给指令内定3个处理函数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+也得以这么用

一句话总括:指令是angular的基本效率之一,用好了经济,监听ng-repeat执市价况唯有是它效益的冰山一角吧

 

相关文章