使用 ui-router 实现 CSS 移动菜单答案

【问题标题】：Materialize CSS mobile menu with ui-router使用 ui-router 实现 CSS 移动菜单
【发布时间】：2015-10-01 04:44:29
【问题描述】：

我正在尝试将 Materialise CSS http://materializecss.com/navbar.html 中的移动折叠导航栏与 UI 路由器一起使用。但是汉堡呢？ (menu 3-stripe) 当我点击它时不会显示菜单 <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>.

有没有办法修改这个，所以我可以把这个导航放在主页上，让 ui-router 只加载部分页面？

【问题讨论】：

你是如何在 ui-router 中安排你的模板和状态的？

标签： angularjs angular-ui-router materialize

【解决方案1】：

我有同样的问题。为了解决这个问题，我按照这里的建议初始化了 JQuery 插件：http://materializecss.com/side-nav.html#initialization

代码示例：

<script>
// Initialize collapse button
$(".button-collapse").sideNav();
</script>

<header>
  <nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
      <a id="logo-container" ui-sref="home" class="brand-logo">Mi Declaración</a>
      <!-- desktop -->
      <ul class="right hide-on-med-and-down">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="contact">Contáctanos</a></li>
      </ul>
      <!-- mobile -->
      <ul id="nav-mobile" class="side-nav">
        <li><a ui-sref="home">Home</a></li>
        <li><a ui-sref="contact">Contáctanos</a></li>
      </ul>
      <a href="" class="button-collapse" data-activates="nav-mobile">
        <i class="material-icons">menu</i>
      </a>
    </div>
  </nav>
</header>

【讨论】：