Materializecss下拉菜单不适用于AngularJS

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.

我正在使用Materialisecss和AngularJS为前端开发一个Web应用程序,我的问题是,实现的下拉菜单组件对我不起作用。

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

在他们的网站上它确实有效,但在我的网站上它没有,我猜它必须用href =“#!”做一些事情。下拉按钮的一部分,因为AngularJS可能正在尝试映射路线或其他东西

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?

如果这是问题那么我怎么能让AngularJS忽略一些hrefs?因为为了做下拉菜单和模态,我需要那些href =“#!”,如果没有,问题是什么,我该怎么办?

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

我尝试删除href或用href =“”更改它,但这不起作用。

2 个解决方案

#1

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.

我在这里使用jQuery是因为你在脚本中使用了jQuery,这也可以在纯JavaScript中轻松完成。确保将JavaScript放在DOM之后,否则将脚本包装在document.onload处理程序中。

#2

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

我最近遇到了类似的情况。我也在使用Materializecss和AngularJS。

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

这是我在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.

我主要通过微小的改动保存你的样品。以下显示了AngularJS部分的代码片段。

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.

请查看示例中的笔设置,并在项目中包含外部JS文件。这些基本上是jQuery,Materialise,Angular库。

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

#1