Controller 'mdtTable', required by directive 'mdtHeaderRow', can't be found!

[chungyan5]

i found this error is similar to a closed issue "Controller 'mdDataTable', required by directive 'mdDataTableHeaderRow', can't be found!", i followed the final solution of that issue to test by adding <script src="https://code.jquery.com/jquery-2.1.4.js"> </script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script> , but i am no luck.

Could you please to have some ideas for this issue?

thanks yan

[buhtig61]

Same Error here

Did some searching , please see issue #24

Even after including jquery and lodash, the error remains

[waldandrade]

Same Error :(

the ^? char in require atribute means i need a controller with ? name as parent.

[iamisti]

@chungyan5 check if you have closing tags for each of your <mdt-row> elements. Others had the same problem and they solved by fixing their closing tags.

[cjackson234]

I have the same issue with both jquery and lodash installed

[develmood]

I copied the example 1:1, just to get it running. First, i got the same error as described, but then I found a solution for my case. Right order of js-files is important:

1. jquery.min.js
2. angular.min.js
3. angular-animate.min.js
4. angular-aria.min.js
5. angular-material.min.js
6. lodash.min.js
7. angular-material-icons.min.js
8. md-data-table-templates.js
9. md-data-table.js

Maybe it helps.

[chungyan5]

hi all,

It seems my fault in testing. It is worked, however, i still cannot use it.

I just try the html and js files by browser in file:///folder/file.html, it works, no any error. When i use electron.atom.io to run it, it showed me this error.

@publicroot still have this problem even following your sequence. @iamisti I selected your demo html and js code for testing, so should have "closing tags".

[calebeaires]

@chungyan5 Same problem here on Electron. Have you found some solution?

[uofmmike]

Jquery was my issue, didn't install as a dependency.

Any chance we can pull the jquery out of there entirely?

[webcane]

@publicroot angular-sanitize.min.js is missing in Your list.

[jdnwi]

Figured out how to fix it in my scenario: insert jquery.min.js BEFORE angular.js:

<script src="/nm/components/jquery/dist/jquery.min.js"></script>

<script src="/nm/components/angular/angular.js"></script>
...

[laurentperroteau]

Adding jQuery at the beginning fix this issue, but I can't understand why ? I rather not load jQuery only because of this issue.

More info:

• ui-router is not the problem
• similar plugin has the same issue : https://github.com/daniel-nagy/md-data-table/issues/152

[uofmmike]

@laurentperroteau Agreed.

I've taken a quick look through the JS and realized jQuery isn't used that often (I think once?). We can almost get away without it! It has something to do with a few element lookups. I'm sure the author would happily accept a pull request for this! (it's on my backburner of tasks personally, but I'm going to try to refactor it out)

@iamisti thoughts on potentially removing the dependency? Thank you for the library! It's working great so far!

[laurentperroteau]

@uofmmike, @iamisti : I resolve the jQuery dependency removing the use of ".find()". I will continue to test the FIX and try to remove the ngMdIcons dependencies too. I hope to submit a pull request next week at the latest.

[iamisti]

@laurentperroteau great, thanks!

[pietrovismara]

Same problem on electron, followed all instructions here, this is my scripts list:

    <script src="./node_modules/jquery/dist/jquery.min.js"></script>
    <script src="./node_modules/lodash/lodash.min.js"></script>
    <script src="./node_modules/angular/angular.js"></script>
    <script src="./node_modules/angular-sanitize/angular-sanitize.js"></script>
    <script src="./node_modules/angular-animate/angular-animate.js"></script>
    <script src="./node_modules/angular-aria/angular-aria.js"></script>
    <script src="./node_modules/angular-material/angular-material.js"></script>
    <script src="./node_modules/angular-material-icons/angular-material-icons.js"></script>
    <script src="./node_modules/md-data-table/dist/md-data-table-templates.js"></script>
    <script src="./node_modules/md-data-table/dist/md-data-table.js"></script>

And here my html:

        <md-content ng-if="!vm.activeFilters.groupBy" layout="row">
            <mdt-table>
                <mdt-header-row>
                    <mdt-column align-rule="left">Artist</mdt-column>
                    <mdt-column align-rule="right">Title</mdt-column>
                </mdt-header-row>
                <mdt-row ng-repeat="track in vm.collection">
                    <mdt-cell>{{track.artist}}</mdt-cell>
                    <mdt-cell>{{track.title}}</mdt-cell>
                </mdt-row>
            </mdt-table>
        </md-content>

Just in case, my app dependencies: ['ngMaterial', 'mdDataTable', 'ngMdIcons', 'ngSanitize'].

Can someone tell me what's wrong?

[iamisti]

Which version did you try?

[markgerald]

Same error here with version 1.8.0.

[iamisti]

@markgerald @pietrovismara Can you guys provide a plunkr or codepen example where you can reproduce the issue?

[pietrovismara]

@iamisti me too version 1.8.0. Since i'm running it on an electron frontend, i don't think this issue is easily reproducible on plunkr.

[iamisti]

Hi Guys, the fix is almost there, I'll have a new release by tomorrow morning and everybody can use it in their electron frontend too.

[pietrovismara]

@iamisti That's great to hear! Looking forward for the release since it's blocking development on my project, thank you very much for your time.

[markgerald]

@iamisti I'm not using electron. I read all the possible solutions for this error on the ordering of lodash, jquery, etc., and nothing works.

These are my addictions:

   './bower_components/jquery/dist/jquery.min.js'
    './bower_components/lodash/lodash.min.js'
    './bower_components/angular/angular.min.js'
    './bower_components/angular-ui-router/release/angular-ui-router.min.js'
    './bower_components/angular-animate/angular-animate.min.js'
    './bower_components/angular-aria/angular-aria.js'
    './bower_components/angular-messages/angular-messages.js'
    './bower_components/angular-sanitize/angular-sanitize.min.js'
    './bower_components/angular-resource/angular-resource.min.js'
    './bower_components/angular-material/angular-material.js'
    './bower_components/angular-material-icons/angular-material-icons.js'
    './bower_components/angular-http-auth/src/http-auth-interceptor.js'
    './bower_components/ngstorage/ngStorage.min.js'
    './bower_components/angular-environment/dist/angular-environment.min.js'
    './bower_components/angular-ui-mask/dist/mask.min.js'
    './bower_components/angular-loading-bar/src/loading-bar.js'
    './bower_components/md-data-table/dist/md-data-table-templates.js'
    './bower_components/md-data-table/dist/md-data-table.js'

The error occurs when trying to play your example:

http://codepen.io/iamisti/pen/kkvBxd

[markgerald]

???

[iamisti]

@markgerald sorry, I'm still working on that bug. We had a pull request for it, but then we figured out it is braking something else. So stay sharp, the fix is coming, most probably tomorrow, but latest after tomorrow. The only issue with the fix is that I can't verify by myself if my fix is really fixes the issue. I'd need some kind of environment where I can also see the issue is happening or not. If you can help me doing this, I'd really thank for it.

[pietrovismara]

@iamisti I can clone the fork and test if it works on electron, just point me to the fork.

[iamisti]

@pietrovismara I pushed the fix to master, so now if you change your bower dependeny from: "mdDataTable": "~v1.8.0" to "mdDataTable": "master" and perform a bower update.

Then let me know if it's fixes the issue.

[pietrovismara]

@iamisti Done and it's working for me in electron! No more errors and the table is correctly displayed.

[iamisti]

Sounds greeat! 👍

Thanks for the fix from @laurentperroteau , I've used his suggestion.

The fix is available with v1.8.1

[markgerald]

here now the error: Cannot read property 'appendChild' of null

[iamisti]

let me look into that and I'll get back when I have something for you to test

[iamisti]

@markgerald can u help me, describing a bit more how did u try to load my example?

• which operating system
• what browser + version of the browser
• is it on mobile or not

Because I can't reproduce your issue, and now I'd need a bit more help in that to fix it for you.

[JimmyPesto]

As this issue also refers to lodash i want to point out that in my case "md-data-table": "^2.2.0" still needs lodash to be included before.

It would save a lot of time for beginners like me if it would be mentioned in the Install part of the readme.

Edit: My website loads without including jQuery but in order to get the basic codepen example working, I had to include jQuery and put headers in a span. (Issue #259)