关于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>
这三个地方写完你就会发现我们页面的动态元素就出来啦,效果如图:
最后欢迎各位码友们在使用过程中遇到任何问题加我一起交流哦!