Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

componentHandler.upgradeAllRegistered() on ngView #4

Closed
Piou2fois opened this issue Jul 23, 2015 · 19 comments
Closed

componentHandler.upgradeAllRegistered() on ngView #4

Piou2fois opened this issue Jul 23, 2015 · 19 comments

Comments

@Piou2fois
Copy link
Contributor

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
Copy link
Owner

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
Copy link
Contributor Author

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
Copy link
Owner

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
Copy link
Contributor Author

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
Copy link
Contributor Author

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

@jadjoubran
Copy link
Owner

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
Copy link
Owner

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
Copy link
Contributor Author

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
Copy link
Owner

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
Copy link
Contributor Author

hacking is not a solution I think.

@jadjoubran
Copy link
Owner

True.

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

@jadjoubran
Copy link
Owner

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
Copy link
Owner

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

@jadjoubran
Copy link
Owner

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

@jadjoubran
Copy link
Owner

Hey @Piou2fois

I just pushed the mdl-upgrade attribute directive as a temporary solition. Check out the docs and let me know if it works for you!

It's a very lightweight solution since it only upgrades the MDL component itself (upgradeElements instead of upgradeAllRegistered) and you only add it on the required elements.

@Piou2fois
Copy link
Contributor Author

Great. I am going to update my project using your directives (switched to lumx as branch, will create a new branch with angularMDL)

@jadjoubran
Copy link
Owner

Great! Let me know how it goes.. So the new directives are working as expected?

@Piou2fois
Copy link
Contributor Author

Did not try yet, this afternoon I will give a try and let you know

@jadjoubran
Copy link
Owner

Closing this for now, feel free to re-open

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants