Materializecss dropdown doesn't work with AngularJS
I am developing a web application using Materializecss and AngularJS for the frontend, my problem is that the materialize menu dropdown is not working for me.
Here's a dropdown example on my 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>
On his site, it works, but mine is not the case, and I am guessing it should do something with the href="#!"
dropdown button part , because maybe AngularJS is trying to map a route or something
If this is a problem, then how can I get AngularJS to ignore some of the hrefs? Because to execute the dropdown menus and modals I need those href="#!"
, and if not, what is the problem and how can I fix it?
I tried to remove the href or change it with href=""
, but it didn't work.
source to share
Be careful to mix the frames, they can and are likely to have unexpected effects. In terms of showing and hiding items, here's a simple example of how to hide, show, or toggle any item.
( 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 JavaScript after the DOM, otherwise wrap your script in a handler document.onload
.
source to share
I recently ran into a similar situation. I have also used Materializecss with AngularJS.
Here is my solution in CodePen: http://codepen.io/omt66/pen/pyeQoy
I basically kept your sample above with a few minor changes. Below is the code snippet for the AngularJS part.
Please take a look at the nib settings in the example and include external JS files in your project. These are mostly 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
});
});
source to share