Javascript TypeError:无法读取属性'；setAttribute'；空的

我目前正在构建一个集成了angular datatables（dataTable.js的angular指令）的angular项目。当我将角度材质的

注入DOM中的角度数据表时，浏览器控制台中显示了附加的图像错误。请查看生成的错误，如下所示

这些代码工作正常，但我想消除浏览器控制台中那个恼人的错误。只有在第一次加载或重新加载DOM时才会引发错误

起初，我认为抛出这个错误是因为jquery在DOM完全加载之前加载，直到我将javascript文件（包括jquery）重新定位在DOM的底部，刚好在结束体，

标记之前

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

---

请帮帮我。我真的不知道我做错了什么，也不知道如何解决这个问题。请参阅关于plunker的另一篇文章。谢谢。

尝试将值更改为非

null
只需将“services.js”文件中的第42行替换为以下代码即可

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

我希望这对你有用。
试试这个

[
    {
        "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>"
    }
]

[
{
“id”：1，“firstname”：“Frederick”，“lastname”：“Eze”，“phone”：“234809495121”，“manage”：“{{item.action}”
},
{
“id”：2，“firstname”：“John”，“lastname”：“Doe”，“phone”：“234809449128”，“manage”：“{{item.action}”
},
{
“id”：3，“firstname”：“Mary”，“lastname”：“Laz”，“phone”：“2348094956690”，“manage”：“{{item.action}”
},
{
“id”：4，“firstname”：“Eunice”，“lastname”：“Akor”，“phone”：“234808795125”，“manage”：“{{item.action}”
},
{
“id”：5，“firstname”：“Kenneth”，“lastname”：“Dues”，“phone”：“23480949178”，“manage”：“{{item.action}”
}
]

将单击功能移动到

<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>

以下angular-material.js第33024行的两行代码负责此js错误

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

其中，当md菜单中没有具有ng click或ng mouseenter属性的元素时，triggerElement为null。
因此，将ng click从md菜单元素移动到md图标元素。使用下面的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>"
    }
]

[
{
“id”：1，“名字”：“弗雷德里克”，“姓氏”：“埃兹”，“电话”：“23480949121”，“管理”：
“{{item.action}”
},
{
“id”：2，“firstname”：“John”，“lastname”：“Doe”，“phone”：“234809449128”，“manage”：“{{item.action}”
},
{
“id”：3，“firstname”：“Mary”，“lastname”：“Laz”，“phone”：“2348094956690”，“manage”：“{{item.action}”
},
{
“id”：4，“firstname”：“Eunice”，“lastname”：“Akor”，“phone”：“234808795125”，“manage”：“{{item.action}”
},
{
“id”：5，“firstname”：“Kenneth”，“lastname”：“Dues”，“phone”：“23480949178”，“manage”：“{{item.action}”
}
]
感谢您的努力，但您的代码未能编译angular material指令，
。svg图标无法显示。角度材质的版本是什么？也许这就是问题所在版本是1.1.8。所有的库版本都包含在index.html中的链接CDN中。这正是我所寻找的完美解决方案。非常感谢@Chinmoy Samanta。我接受这一点作为我问题的解决方案。感激@Ininiv该解决方案有效，但我不想将
用作触发器DOM元素的一部分，因为它在DOM上添加了额外的填充或大小。然而，这消除了错误，我接受它作为解决方案。chinmoy Samanta说的话在没有进一步调整DOM的情况下成功了。我的意思是说我已经投了赞成票，因为我只能接受一个答案