在AngularJS项目中使用Handsontable遇instance.rootElement.getAttribute错误求助

我来帮你搞定这个问题，先说说错误的根源，再给你修改后的代码：

错误原因 #

你在创建Handsontable实例时，传入的container是AngularJS的jqLite包装对象，而Handsontable底层需要的是原生DOM元素。当Handsontable内部尝试调用原生DOM的getAttribute方法时，jqLite对象并没有这个方法，所以就抛出了instance.rootElement.getAttribute is not a function的错误。

解决方案 #

有两种简单的修复方式：

• 直接获取原生DOM元素，跳过jqLite包装
• 如果已经用angular.element获取了对象，就取它的第一个元素（jqLite是类数组结构，索引0对应原生DOM节点）

另外，还有个AngularJS的最佳实践要提醒你：DOM操作尽量放在directive的link函数里，而不是controller中，controller更适合处理业务逻辑，link负责DOM相关的初始化操作。

修改后的代码示例 #

调整后的dragresize.js #

angular.module('myApp',[]).directive('dragResize',function(){
return{
restrict: 'AEC',
replace:true,
// 改用link函数处理DOM初始化
link: function(scope, element, attrs) {
    // 方式1：直接获取原生DOM元素
    // var container = document.getElementById('example1');
    // 方式2：利用directive提供的element参数（已经是jqLite对象，取[0]得到原生DOM）
    var container = element[0];
    var hot;

    hot = new Handsontable(container, {
        data: Handsontable.helper.createSpreadsheetData(200, 10),
        rowHeaders: true,
        colHeaders: true,
        colWidths: [55, 80, 80, 80, 80, 80, 80],
        rowHeights: [50, 40, 100],
        manualColumnResize: true,
        manualRowResize: true
    });

    function bindDumpButton() {
        if (typeof Handsontable === "undefined") {
            return;
        }
        Handsontable.Dom.addEvent(document.body, 'click', function (e) {
            var element = e.target || e.srcElement;
            if (element.nodeName == "BUTTON" && element.name == 'dump') {
                var name = element.getAttribute('data-dump');
                var instance = element.getAttribute('data-instance');
                var hot = window[instance];
                console.log('data of ' + name, hot.getData());
            }
        });
    }
    bindDumpButton();
}
};
});

说明 #

• 我把DOM初始化逻辑从controller移到了link函数，这更符合AngularJS的设计规范
• 利用directive自带的element参数，直接取element[0]得到原生DOM节点，不用再通过document.getElementById查找，代码更简洁
• 两种获取原生DOM的方式都可以，你可以根据自己的习惯选择

这样修改后，Handsontable就能拿到正确的原生DOM元素，那个getAttribute的错误就会消失了。

内容的提问来源于stack exchange，提问作者bhaskar das