layui常见知识点

• 1、下拉框监听事件

下拉框的监听事件只能执行一次，应把下拉框改变所执行的操作写在一个监听事件中。

• 2、下拉框渲染传过来的值

下拉框传过来的值，已经选中，但是没有显示，可以考虑用

$scope.$apply();

$timeout(function () {

    layui.form.render();

}, 300);

• 3、layui-tab切换时，只显示当前tab的数据，清除其他tab页数据

// 第一个&第二个&第三个tab内容显示与否
$scope.tabShowObj = {
	oneTab: true,
	twoTab: false,
	threeTab: false
};

// 第一个&第二个&第三个指令间参数传递的通道
$scope.commonParams = {
	tabType: 'oneTab', // 标识是哪个tab页，用于权限表格查询条件
	procDefUniqueId: $scope.rowData.procDefUniqueId // 流程定义id
};
var initLayuiTab = function () {
	// 第二个&第三个指令进行监听 符合条件后执行初始化函数
	layui.element.on('tab(attrSetFilter)', function (data) {
	    var id = $(data.elem.context).attr('id');
		angular.forEach($scope.tabShowObj, function (value, index) {
			$scope.tabShowObj[index] = false;
		});
		$scope.tabShowObj[id] = true;
		$scope.commonParams.tabType = id;
		$scope.$apply();
	});
};

<div id="changeTab" class="def-layer-content">
    <div class="layui-tab layui-tab-brief left w100pre" lay-filter="attrSetFilter">
        <ul class="layui-tab-title">
            <li class="layui-this" id="oneTab">第一个</li>
            <li id="twoTab">第二个</li>
            <li id="threeTab">第三个</li>
        </ul>
        <div class="layui-tab-content pl0px">
            <div class="layui-tab-item layui-show">
                <div one-directive common-params="commonParams" ng-if="tabShowObj.oneTab"></div>
            </div>
            <div class="layui-tab-item">
                <div two-directive common-params="commonParams" ng-if="tabShowObj.twoTab"></div>
            </div>
            <div class="layui-tab-item">
                <div three-directive common-params="commonParams" ng-if="tabShowObj.threeTab"></div>
            </div>
        </div>
    </div>       
</div>