1

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 ;) !

6
  • Have you injected $timeout into your controller? any errors? Commented Mar 12, 2018 at 13:41
  • Thanks Joe ! Yes, $timeout is injected into my controller Commented Mar 12, 2018 at 13:45
  • Why dont you use angular-materialize? Commented Mar 12, 2018 at 13:48
  • Hummm... Good question. But I see bad migrating to another framework. Unless I can use both. What do you think about it? 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. Commented Mar 12, 2018 at 14:08

1 Answer 1

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

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

1 Comment

Thanks lin ! I'll try this !

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.