Materializecss 下拉菜单不适用于 AngularJS

Question

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

这是他们网站上的示例下拉菜单

$( 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>

在他们的网站中它确实有效，但在我的网站中却没有，我猜它必须与下拉按钮的 href="#!" 部分有关，因为也许 AngularJS 正在尝试映射路线或其他东西

如果这是问题所在，那么如何让 AngularJS 忽略某些 href？因为为了做下拉菜单和模态，我需要那些href="#!"，或者如果没有，有什么问题，我该如何解决？

我尝试删除 href 或将其更改为 href=""，但没有成功。

Answer 1

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

这是我在 CodePen 的解决方案：http://codepen.io/omt66/pen/pyeQoy

我主要将您的示例保留在上面，并进行了细微的更改。 下面显示了AngularJS部分的代码sn-p。

请查看示例中的笔设置，并将外部 JS 文件包含在您的项目中。这些基本上是 jQuery、Materialize、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
  });
});

Answer 2

小心混合框架，它可以而且可能会产生意想不到的效果。至于显示和隐藏元素，这里有一个简单的示例，说明如何隐藏、显示或切换任何元素。

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

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