TypeError：无法读取 null 的属性“setAttribute”

Question

我目前正在构建一个集成了 angular-datatables（dataTable.js 的 angular 指令）的 Angular 项目。当我将 <md-menu></md-menu> 的角度材料注入 DOM 中的角度数据表时，我在浏览器控制台中显示附加的图像错误。请查看生成的错误，如下所示

代码工作正常，但我想摆脱浏览器控制台中那个烦人的错误。仅在第一次加载或重新加载 DOM 时引发错误。

最初，我认为抛出错误是因为 jquery 在 DOM 完全加载之前加载，直到我将包括 jquery 在内的 javascript 文件重新定位在 DOM 的底部，就在关闭正文之前，</body> 标记。

这对我的项目不利，因为随着我进一步构建，东西可能会变得混乱。在我的研究过程中，我在网上看到过类似的错误，但提供的解决方案都没有解决我的问题。

请帮帮我。我真的不知道做错了什么或如何解决这个问题。另请参阅 plunker 上的DEMO PROJECT。谢谢。

Answer 1

angular-material.js 的第 33024 行以下两行代码是造成此 js 错误的原因。

triggerElement = $element[0].querySelector('[ng-click],[ng-mouseenter]');
triggerElement.setAttribute('aria-expanded', 'false');

如果 md-menu 中没有具有 ng-click 或 ng-mouseenter 属性的元素，则 triggerElement 为 null。 所以将 ng-click 从 md-menu 元素移动到 md-icon 元素。使用下面的json。

    [
    {
        "id":1,"firstname":"Frederick","lastname":"Eze","phone":"2348094959121","manage":
        "<md-menu><md-icon ng-click=\"$mdMenu.open($event)\" md-svg-icon=\"dots-vertical\"></md-icon><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":2,"firstname":"John","lastname":"Doe","phone":"2348094449128","manage":"<md-menu><md-icon ng-click=\"$mdMenu.open($event)\" md-svg-icon=\"dots-vertical\"></md-icon><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":3,"firstname":"Mary","lastname":"Laz","phone":"2348094956690","manage":"<md-menu><md-icon ng-click=\"$mdMenu.open($event)\" md-svg-icon=\"dots-vertical\"></md-icon><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":4,"firstname":"Eunice","lastname":"Akor","phone":"2348087959125","manage":"<md-menu><md-icon ng-click=\"$mdMenu.open($event)\" md-svg-icon=\"dots-vertical\"></md-icon><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":5,"firstname":"Kenneth","lastname":"Dues","phone":"2348094959178","manage":"<md-menu><md-icon ng-click=\"$mdMenu.open($event)\" md-svg-icon=\"dots-vertical\"></md-icon><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    }
]

Answer 2

试试这个

[
    {
        "id":1,"firstname":"Frederick","lastname":"Eze","phone":"2348094959121","manage":"<md-menu ><md-button class=\"md-icon-button\" ng-click=\"$mdMenu.open($event)\"><md-icon md-menu-origin=\"\" md-svg-icon=\"dots-vertical\"></md-icon></md-button><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":2,"firstname":"John","lastname":"Doe","phone":"2348094449128","manage":"<md-menu ><md-button class=\"md-icon-button\" ng-click=\"$mdMenu.open($event)\"><md-icon md-menu-origin=\"\" md-svg-icon=\"dots-vertical\"></md-icon></md-button><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":3,"firstname":"Mary","lastname":"Laz","phone":"2348094956690","manage":"<md-menu ><md-button class=\"md-icon-button\" ng-click=\"$mdMenu.open($event)\"><md-icon md-menu-origin=\"\" md-svg-icon=\"dots-vertical\"></md-icon></md-button><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":4,"firstname":"Eunice","lastname":"Akor","phone":"2348087959125","manage":"<md-menu ><md-button class=\"md-icon-button\" ng-click=\"$mdMenu.open($event)\"><md-icon md-menu-origin=\"\" md-svg-icon=\"dots-vertical\"></md-icon></md-button><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    },
    {
        "id":5,"firstname":"Kenneth","lastname":"Dues","phone":"2348094959178","manage":"<md-menu ><md-button class=\"md-icon-button\" ng-click=\"$mdMenu.open($event)\"><md-icon md-menu-origin=\"\" md-svg-icon=\"dots-vertical\"></md-icon></md-button><md-menu-content><md-menu-item ng-repeat=\"item in ctrl.actions\"><md-button>{{item.action}}</md-button></md-menu-item></md-menu-content></md-menu>"
    }
]

将点击功能移至

<md-button class=\"md-icon-button\" ng-click=\"$mdMenu.open($event)\"><md-icon md-menu-origin=\"\" md-svg-icon=\"dots-vertical\"></md-icon></md-button>

Answer 3

只需将 "services.js" 文件中的 line no 42 替换为以下代码

if(iElement.assignedSlot){
$compile(iElement.contents())(scope);
}

我希望这对你有用。

Answer 4

尝试将值更改为 null 以外的其他值。