AngularJS + Materialize dropdown doesn't work

Question

I have a problem... My Materialize dropdown works only after a reloading of my homepage. I tried all the solutions which I was able to find. Nothing can be done.

Here is my code :

this.$postLink = () => {
      $timeout(() => {
        $('.dropdown-button').dropdown();
      }, 1000);
    };

<li ng-if="$ctrl.parent.isLogged()">
    <a class="dropdown-button" href data-activates="menu_user">
       {{'NAVBAR.HELLO' | translate}} {{$ctrl.parent.userName()}}
           <i class="material-icons right">arrow_drop_down</i>
    </a>
</li>

Thanks for your help ;) !

Have you injected $timeout into your controller? any errors? — Joe Warner
– Joe Warner, Commented Mar 12, 2018 at 13:41
Hummm... Good question. But I see bad migrating to another framework. Unless I can use both. What do you think about it? — Jek
– Jek, Commented Mar 12, 2018 at 13:58
Materialize isnt a framework, its a library. You should use AngularJS supported libraries if you don't want to write a directive for every element binding you need. — lin
– lin, Commented Mar 12, 2018 at 14:08

lin · Accepted Answer · 2018-03-12 14:04:34Z

1

You have to use a directive:

View

<div ng-controller="MyCtrl">

  <a class='dropdown-button btn' 
     href='#' 
     data-activates='dropdown1' 
     my-dropdown-button>Drop Me!</a>

  <ul id='dropdown1' class='dropdown-content'>
    <li><a href="#!">one</a></li>
    <li><a href="#!">two</a></li>
    <li class="divider"></li>
    <li><a href="#!">three</a></li>
  </ul>
</div>

AngularJS application

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', function() {});

myApp.directive('myDropdownButton', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      element.dropdown({
        inDuration: 300,
        outDuration: 225,
        constrainWidth: false, // Does not change width of dropdown to that of the activator
        hover: true, // Activate on hover
        gutter: 0, // Spacing from edge
        belowOrigin: false, // Displays dropdown below the button
        alignment: 'left', // Displays dropdown with edge aligned to the left of button
        stopPropagation: false // Stops event propagation
      });
    }
  }
});

> demo fiddle

edited Mar 12, 2018 at 14:04

answered Mar 12, 2018 at 13:42

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jek Over a year ago

Thanks lin ! I'll try this !

Collectives™ on Stack Overflow

AngularJS + Materialize dropdown doesn't work

1 Answer 1

View

AngularJS application

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

View

AngularJS application

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related