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

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

(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 处理程序中。

Answer 2

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

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

我基本上保留了上面的样本，只是做了一些小改动。以下显示了 AngularJS 部分的代码片段。

请查看示例中的笔设置，并将外部 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
  });
});

Materializecss 下拉菜单不适用于 AngularJS

Materializecss dropdown menu not working with AngularJS

javascript

html

css

angularjs

materialize