Am currently building an angular project with angular-datatables (an angular directive of dataTable.js) integrated. I get the attached image error showing in the browser console when I inject <md-menu></md-menu> of angular material into the angular-datatable in the DOM. Please view the generated error as show below

The codes work fine but I want to get rid of that annoying error in the browser console. The error is thrown only the first time the DOM loads or reloaded.

Initially, I thought that the error was thrown because jquery loads before the DOM is fully loaded until I re-positioned the javascript files including jquery at the base of the DOM just before the closing body, </body> tag.

This is not good for my project as stuffs may get messy as I further build. I have seen similar errors online in the course of my research but none of the provided solutions solved my problem.

Please help me out. I don't really know what am doing wrong or how to fix this. Please see also the DEMO PROJECT on plunker. Thank you.

Am currently building an angular project with angular-datatables (an angular directive of dataTable.js) integrated. I get the attached image error showing in the browser console when I inject <md-menu></md-menu> of angular material into the angular-datatable in the DOM. Please view the generated error as show below

The codes work fine but I want to get rid of that annoying error in the browser console. The error is thrown only the first time the DOM loads or reloaded.

Initially, I thought that the error was thrown because jquery loads before the DOM is fully loaded until I re-positioned the javascript files including jquery at the base of the DOM just before the closing body, </body> tag.

This is not good for my project as stuffs may get messy as I further build. I have seen similar errors online in the course of my research but none of the provided solutions solved my problem.

Please help me out. I don't really know what am doing wrong or how to fix this. Please see also the DEMO PROJECT on plunker. Thank you.

• javascript
• jquery
• angularjs
• angular-material

Share Improve this question Follow edited Mar 23, 2018 at 12:04 cyberpirate92 3,18655 gold badges2929 silver badges4848 bronze badges asked Mar 23, 2018 at 11:34 Frederick EzeFrederick Eze 13111 gold badge22 silver badges1212 bronze badges 2

• what is the version of your angular material? maybe thats the issue – Ricardo Commented Mar 23, 2018 at 12:26
• The version is 1.1.8. All the library versions are contained on the linked CDN in index.html – Frederick Eze Commented Mar 23, 2018 at 12:29

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 3

Below two line code at line no 33024 of angular-material.js is responsible for this js error.

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

Where triggerElement is null when there is no element with ng-click or ng-mouseenter attribute inside md-menu. So move ng-click from md-menu element to md-icon element. Use below 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>"
    }
]

Try this

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

Moved the click function to

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

Just replace line no 42 in "services.js" file with below code

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

I hope this will work for you.

Try changing the value to something else than null.