关于layui页面动态元素没有渲染出来的解决方案
本文主要介绍angluarJS与layui整合使用过程中页面加载时一些动态元素没有显示出来的解决办法。
1、首先在对应的JS文件中自定义repeatFinish指令
在js的末尾自定义repeatFinish指令，需要结合html中的repeat-finish标签来使用，用于监听列表数据渲染完毕的状态。
// An highlighted blockApp.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>
这三个地方写完你就会发现我们页面的动态元素就出来啦，效果如图：
最后欢迎各位码友们在使用过程中遇到任何问题加我一起交流哦！
