Выпадающее меню Materializecss не работает с AngularJS

Question

Я разрабатываю веб-приложение с использованием Materializecss и AngularJS для интерфейса, моя проблема в том, что выпадающее меню компонента материализации не работает для меня.

Вот пример выпадающий на их сайте

$(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 игнорировать некоторые из hrefs? Потому что для того, чтобы делать выпадающие списки и модальности, мне нужны те 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, 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 
    }); 
});