Materializecss dropdown menu not working with AngularJS

Question

I'm developing a web app using Materializecss and AngularJS for the front-end, my problem is that the dropdown menu component of materialize doesn't work for me.

Here's the example dropdown on their site

$( document ).ready(function(){
    $(".dropdown-button").dropdown();
});

<!-- Dropdown Structure -->
<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>
<nav>
  <div class="nav-wrapper">
    <a href="#!" class="brand-logo">Logo</a>
    <ul class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li><a href="components.html">Components</a></li>
      <!-- Dropdown Trigger -->
      <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a></li>
    </ul>
  </div>
</nav>

In their site it does work but in mine it doesn't and I'm guessing it has to do something with the href="#!" part of the dropdown button because maybe AngularJS is trying to map the route or something

If this is the problem then how can I make AngularJS ignore some of the hrefs? Because in order to do dropdowns and modals I need those href="#!", or if not, what's the problem, and how could I fix it?

I tried removing the href or changing it with href="", but that didn't work.

Well you're using jquery in angular. Use this material.angularjs.org/#. — dowomenfart
– dowomenfart, Commented Apr 29, 2015 at 16:18

Mogsdad · Accepted Answer · 2015-12-18 16:42:01Z

2

Be careful mixing frameworks, it can, and probably will have unexpected effects. As for showing and hiding elements, Here is a simple example of how to hide, show, or toggle any element.

(demo)

HTML

<a href="javascript:void()" data-show="hidden">Show</a>
<a href="javascript:void()" data-hide="hidden">Hide</a>
<a href="javascript:void()" data-toggle="hidden">Toggle</a>
<div id="hidden"><!-- This can be any type of element -->
    <!-- Anything in here -->
</div>

CSS

#hidden {
    display: none;
}

JavaScript

$("[data-show]").on("click", function () {
    $("#" + $(this).attr("data-show")).css("display", "initial");
});
$("[data-hide]").on("click", function () {
    $("#" + $(this).attr("data-hide")).css("display", "none");
});
$("[data-toggle]").on("click", function () {
    var target = $("#" + $(this).attr("data-toggle"));
    if (target.css("display") === "none") {
        target.css("display", "initial");
    } else {
        target.css("display", "none");
    }
});

I used jQuery here because you used jQuery in your script, this can be done easily in pure JavaScript as well. Make sure to put the JavaScript after the DOM, otherwise wrap the script in a document.onload handler.

edited Dec 18, 2015 at 16:42

Mogsdad

46k21 gold badges166 silver badges289 bronze badges

answered Apr 29, 2015 at 17:10

user4639281

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

1 Comment

HardCodeStuds Over a year ago

Thanks, although it's not the answer i was looking for it's the one i'll go with. I didn't want to create my own implementation of showing/hiding elements but let the frameworks do their own thing. I guess mixing these two frameworks i'll have to create my own implementations.

omt66 · Accepted Answer · 2016-03-21 22:26:52Z

I recently ran into a similar situation. I was also using the Materializecss with AngularJS.

Here is my solution at CodePen: http://codepen.io/omt66/pen/pyeQoy

I mostly kept your sample above with minor changes. The following shows the code snippet for the AngularJS part.

Please take a look at the pen settings in the example and include the external JS files in your project. These are basically, jQuery, Materialize, Angular libraries.

var app = angular.module("app", []);
app.controller("MainCtrl", function($scope) {
  console.log("In Angular MainCtrl");

  $scope.items = [
    {text: "Bing", url: "http://bing.com"},   
    {text: "ZDNet", url: "http://zdnet.com"},
    {text: "CNet", url: "http://cnet.com"}
  ]; 

  $('.dropdown-button').dropdown({
    belowOrigin: true, 
    alignment: 'left', 
    inDuration: 200,
    outDuration: 150,
    constrain_width: true,
    hover: false, 
    gutter: 1
  });
});

Collectives™ on Stack Overflow

Materializecss dropdown menu not working with AngularJS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related