Materialize actualization broke the modal API

[nanotime]

Materialize make a new actualization and broke all the API for modals, can someone update the directive? I tried but the modals still are broken 😞

[mnogueron]

Seems to be related to this commit: Materialize Renamed leanModal and this issue: https://github.com/Dogfalo/materialize/issues/3845

I've figured out a way to get it work by using the data-target tag in the modal button and no more href, and by modifying this piece of the modal directive from @krescruz in angular-materialize.js - l.1166 :

modalEl.modal(options);
element.modal(options);
// Setup watch for opening / closing modal programatically.
if (angular.isDefined(attrs.open) && modalEl.length > 0) {
  scope.$watch('open', function(value, lastValue) {
    if (!angular.isDefined(value)) { return; }
      (value === true) ? modalEl.modal('open') : modalEl.modal('close');
  });
}

As refered in another issue, some refactoring has been done and the modal need to be now initialized in addition to running modalEl.modal('open') which was all performed by modalEl.openModal(). This feature seems to be a lot discussed on the issues, and not well accepted by the community...

I've just pushed a pull request: #203

[nanotime]

Yep, i noticed that but there is a problem, the overlay in the modals are broken... why? Y grabbed your changes manually to make some tests but it just doesn't works.

[mnogueron]

The overlay was broken for me when I was using the href attribute, it seems to work now with the data-target attribute. I've pushed new changes to my PR that bump the materialize version on both bower and index.html

Do you still experienced overlay issues? If yes, can you send a code example?

[nanotime]

Cool, the problem isn't the JS per-se, is the css... weird thing because it have no sense for me... i added these styles to my css for .modal-overlay:

.modal-overlay
  width: 100% !important
  height: 100vh !important
  background-color: $cc-black !important
  position: fixed !important
  top: 0 !important

and.... worked.

The strange thing here, is that i have the latest version of materialize (css and js).

[mnogueron]

So, that's not caused by this project, but by dogfalo/materialize, right?

[nanotime]

Don't know, watching the repo code for the class, it have the right styles, but i assume that the problem isn't this fix.

For a quick reference:

.modal-overlay

[webbiesdk]

I think this was fixed by #203.

If it wasn't, then create a new issue with the problem (some of your comments might have been problem unrelated to the main issue).