layui页面动态元素没有渲染出来的解决方案

关于layui页面动态元素没有渲染出来的解决方案

本文主要介绍angluarJS与layui整合使用过程中页面加载时一些动态元素没有显示出来的解决办法。
1、首先在对应的JS文件中自定义repeatFinish指令
在js的末尾自定义repeatFinish指令，需要结合html中的repeat-finish标签来使用，用于监听列表数据渲染完毕的状态。

// An highlighted block
App.directive('repeatFinish', function () {
    return {
        link: function (scope, element, attr) {
            if (scope.$last == true) {
                //列表渲染完毕后重新渲染 layui element 元素
                layui.use(['element'], function () {
                    var element = layui.element;
                    //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
                    element.init();
                });
            }
        }
    }
});

2、在引入该js对应的页面上加载列表处添加reapt-finish标签。

//此处的ciOrderList就是你要渲染的列表
//因为我在定义js的时候使用的是 var self = this;所以需要加ctrl
//如果你定义的是var self = $scope就不需要这个ctrl了
<tr ng-repeat="item in ctrl.ciOrderList" repeat-finish>

3、最后记得在layui组件加载完之后初始化初始化动态元素，说白了就是当数据加载完之后就渲染你的这些动态元素。

<script>
    $(function () {
        layui.extend({
            admin: basePath + '/static/module/layui_we/static/js/admin'
        });

        //通过controller来获取Angular应用
        var appElement = document.getElementById("controller");
        //获取$scope变量
        var $scope = angular.element(appElement).scope();

        layui.use(['form', 'laydate', 'jquery', 'admin', 'element'], function () {
            var element = layui.element, laydate = layui.laydate, form = layui.form;
            
            //初始化动态元素，一些动态生成的元素如果不设置初始化，将不会有默认的动态效果
            element.init();
        });
    })
</script>

这三个地方写完你就会发现我们页面的动态元素就出来啦，效果如图：

最后欢迎各位码友们在使用过程中遇到任何问题加我一起交流哦！