componentHandler.upgradeAllRegistered() on ngView

[Piou2fois]

Hi
I am facing an issue using MDL with Angularjs in the ngView
For example on Textfields, the ripple.js is launched before the end of the ng-repeat process into the ngView. It is recommended to launch the function componentHandler.upgradeAllRegistered() when all is finished on dynamic websites but can't find anyway for that.
Best way seems to have a directive linked to the "$last" of ngRepeat elements :

.directive('onFinishRender', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attr) {
      if (scope.$last === true) {
        element.ready(function() {
          componentHandler.upgradeAllRegistered()
        });
      }
    }
  }

Perhaps you can add this directive in all the MDL directives ?

[jadjoubran]

Hi @Piou2fois

Thank you for contributing to angular-material-design-lite!

This indeed a great idea that's very common in dynamic website.

I'm very interested in having a solution that works for all scenarios.. the problem with the scenario is that it only works for your scenario.

I can help you create a fix for your specific scenario and then we can maybe work on a fix for most scenarios.

So can you please provide a working plnkr of your issue?

[Piou2fois]

Yeah you can get there
http://plnkr.co/edit/cocnTVF1g2mqziy89nL0?p=preview
And remove on the groups.html template to see the problem, this is a simple way I found with icebox on IRC to get the function launched.
The other system can be found there (solution made by Jimlei) : http://plnkr.co/edit/q14LPr34tUELd3lDCywE?p=preview
It is using a directive with function as parameter (any function, idea is to use the component....

[jadjoubran]

I'm sorry but I couldn't reproduce the issue.. I'm probably missing something.

Can you please provide me with 2 plnkrs, one of them containing the issue and the other one fixed?

Also please try to make it as brief as possible so I can focus on the issue we're trying to solve.

Thanks again!

[Piou2fois]

http://plnkr.co/edit/MUI2iBslIH9jd4fgEQPL?p=preview
I made 2 templates, one is working with the ngIf the other one not (the style of the textfield is not "rippled" )

[Piou2fois]

Don't forget I did not used your directive yet, but I imagine you will have the same issue

[jadjoubran]

Thank you very much!

The solution would be to use the componentHandler.upgradeElement() method on the linking phase of the directive just like MDL suggests on their website: http://www.getmdl.io/started/index.html#dynamic

Working on a fix

[jadjoubran]

I had to do it inside the compile instead of the link (because the element has to be in the Dom to be upgraded).

So it worked on the mdl-text-field I'm now working on the other elements and updating the documentation

[Piou2fois]

That's in fact the problem, elements have to be in the DOM to be updated. Don't master yet the directive system so can't help you with that, but if you found the solution that's perfect, tou can now reach a full working MDL system.

[jadjoubran]

Yeah I'm having some other issues now with the Checkbox and I'm seeing some of these issues are already open on MDL's repository.. So I might have to postpone it or go with a temporary solution just like you suggested (an attribute directive that fires only at the end).. but it feels like a hack

[Piou2fois]

hacking is not a solution I think.

[jadjoubran]

True.

Okay just noticed that they released 1.0.1. I should upgrade and see if it makes a difference.

[jadjoubran]

Great at least now I can write upgradeElement(el) without specifying its type: MaterialButton, etc..
So I still have the issue with the ripples.. And the issue is still open google/material-design-lite#804
So I'm subscribed and I'll fix it as soon as it's possible

[jadjoubran]

Actually I just noticed that the problem seems to be because the element was already upgraded..

[jadjoubran]

Unfortunately, we have to wait for the open issue.
Thanks again for contributing and don't forget to star the project!