4

フロントエンドに Materializecss と AngularJS を使用して Web アプリを開発しています。私の問題は、マテリアライズのドロップダウン メニュー コンポーネントが機能しないことです。

これが彼らのサイトのドロップダウンの例です

$( 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=""たが、うまくいきませんでした。

4

2 に答える 2

0

私は最近、同様の状況に遭遇しました。また、AngularJSでMaterializecssを使用していました。

CodePen での私のソリューションは次のとおりです: http://codepen.io/omt66/pen/pyeQoy

私は主にあなたのサンプルを上に置いて、マイナーな変更を加えました。以下は、AngularJS 部分のコード スニペットを示しています。

例のペン設定を見て、プロジェクトに外部 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
  });
});
于 2016-03-21T22:17:12.770 に答える