AngularJs中动态html包含指令问题

系统管理员 2022-05-19 01:45 172阅读 0赞

### AngularJs中动态html包含指令问题 ###

在使用ui-grid来渲染数据列表的时候，遇到一个问题就是当数据量太大的时候，对于渲染好了的列表，如果再次修改这个列表，重新绑定数据集，ui-grid处理非常慢（大致看了一下源码，里面对于重新绑定的数据集，不会去创建表格，只会从当前的表格中克隆节点，然后再处理，并且其中需要销毁很多的监听器）。一直解决不了，换了一种方式，当数据变化的时候，我就销毁当前表格（其实就是移除了dom节点），然后重新创建一个动态的html片段代码，里面绑定有ui-grid的指令。当我将动态的html插入到文档中之后，然后再设置表格数据，发现表格并没有渲染。

//创建新表格
        $scope.createNewGrid = function(elementId,headers,datas){ 
            //获取旧容器
            var container = document.getElementById(elementId);
            var childList = container.childNodes;
            var oldGridContainer = null;
            //找到Grid容器
            for(var i = 0; i < childList.length; i ++){
                if(/DIV/i.test(childList[i].nodeName)){
                    oldGridContainer = childList[i];
                    break;
                }
            }
            //新表格容器
            var newGridContainer = oldGridContainer.cloneNode(false);
            //销毁就容器
            container.innerHTML = "";
            $scope.newGridOptions = createGridOptions();
            newGridContainer.setAttribute("ui-grid","newGridOptions");
            container.appendChild(newGridContainer);
            //设置数据集
            $scope.newGridOptions.data = datas;
            console.log(newGridContainer);
            /*console.log(uiGrid);*/
        }

上面代码的问题就是，我获取的以前的节点并克隆了一份，当我插入文档之后，该节点包含指令没有被编译，指令没有和作用域连接起来，因此导致了问题。

**解决方案**：使用angular的$compile来编译指令，compile可以将一个HTML字符串或者DOM编译成模板，该模板能够与scope链接起来，也就是说直接插入一段html片段到页面中，虽然能插入进去，但是angular并没有编译，所以任何ng事件指令绑定都是无效的，通过compile能够将html片段先编译后再插入 。

**html代码片段**：后面构造表格函数传入的elementId就是这个Id，ui-grid内容就渲染在这个dom之中

**关键代码**：

//编译指令，并挂载作用域
    container.html($compile("<div ui-grid='" + gridOptionsIdentifier +"' ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize></div>")($scope));

**改进后的表格创建函数**：

//创建新表格API
        $scope.createNewGrid = function(elementId,headers,datas){ 
            //获取旧容器
            var container = $("#"+elementId);
            //销毁以前的Grid容器
            container.html("");
            //生成Grid唯一标识
            var gridOptionsIdentifier = "gridOptions_"+(new Date()).getTime();
            //生成配置项
            $scope[gridOptionsIdentifier] = createGridOptions(); 
            //编译指令，并挂载作用域
            container.html($compile("<div ui-grid='" + gridOptionsIdentifier +"' ui-grid-selection ui-grid-exporter ui-grid-resize-columns ui-grid-auto-resize></div>")($scope));
            //挂载数据
            $scope[gridOptionsIdentifier].columnDefs = headers;
            $scope[gridOptionsIdentifier].data = datas;
            //将表格绑定到全局变量，以便于后面获取表格API
            if(elementId == "leftGrid"){
                $scope.leftGridOptions = $scope[gridOptionsIdentifier];
            }
            else if(elementId == "rightGrid"){
                $scope.rightGridOptions = $scope[gridOptionsIdentifier];
            }
            else {
                $scope.resultGridOptions = $scope[gridOptionsIdentifier];
            }
            console.clear();
        }

**创建表格配置代码**：

//创建表格配置
        function createGridOptions(){ 
            var gridOptions = {};
            (function(arg){ 
                arg = gridOptions || {};
                arg.enableSorting = true;
                arg.useExternalSorting= false;//是否使用自定义排序规则 
                arg.enableGridMenu= true; //是否显示grid菜单 
                arg.enableHorizontalScrollbar= 1; //grid水平滚动条是否显示, 0-不显示 1-显示 
                arg.enableVerticalScrollbar= 1; //grid垂直滚动条是否显示, 0-不显示 1-显示 
                //----------- 选中 ---------------------- 
                arg.showGridFooter= true, //是否显示grid footer
                arg.enableFooterTotalSelected= true; // 是否显示选中的总数，默认为true, 如果显示，showGridFooter 必须为true 
                arg.enableFullRowSelection= false; //是否点击行任意位置后选中,默认为false,当为true时，checkbox可以显示但是不可选中 
                arg.enableRowHeaderSelection= true; //是否显示选中checkbox框 ,默认为true 
                arg.enableRowSelection= true; // 行选择是否可用，默认为true; 
                arg.enableSelectAll= true; // 选择所有checkbox是否可用，默认为true; 
                arg.enableSelectionBatchEvent= true; //默认true 
    
                arg.isRowSelectable= function (row) {  //GridRow 
                    $scope.index += 1;       
                    if ($scope.index == 1) {  
                        row.grid.api.selection.selectRow(row.entity); // 选中行 
                    }  
                },  
                arg.modifierKeysToMultiSelect= false;//默认false,为true时只能 按ctrl或shift键进行多选, multiSelect 必须为true; 
                arg.multiSelect= true;// 是否可以选择多个,默认为true; 
                arg.noUnselect= false;//默认false,选中后是否可以取消选中 
                arg.selectionRowHeaderWidth= 30;//默认30 ，设置选择列的宽度； 
                //---------------api--------------------- 
                arg.onRegisterApi=function (gridApi) {   
                    arg.gridApi = gridApi;  
                    //行选中事件 
                    arg.gridApi.selection.on.rowSelectionChanged(arg, function (row, event) {   
                        if (row) {  
                            arg.testRow = row.entity;  
                            arg.isSelected = row.isSelected;  
                            //console.log($scope.gridApi.selection.getSelectedRows());
                        }  
                    });
                };
                //获取表格所有数据
                arg.getAllRows = function(){ 
                    return arg.data;
                }
                //----------------导出--------------------
                arg.exporterCsvColumnSeparator = ','; 
                arg.exporterOlderExcelCompatibility = true;//是否兼容低版本excel 
                arg.exporterHeaderFilterUseName = true; 
                arg.exporterMenuCsv = true; 
                arg.exporterMenuLabel = "导出";
                arg.exporterMenuPdf = false;
                return arg;
            })(gridOptions);
            return gridOptions;
        }