Question

为导航栏使用UI-Router for Angular和Bootstrap我试图在下拉列表中点击锚点但是不能在移动设备上工作。我看到ui-sref not working in bootstrap dropdown，解决方案对我不起作用。我在控制台上没有收到任何错误。

HTML：

<div class="container">
    <a class="mainnav-toggle is-open" data-toggle="collapse" data-target=".mainnav-collapse">
      <span class="sr-only">Toggle navigation</span>
      <i class="fa fa-bars"></i>
    </a>

    <nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;">
      <ul class="mainnav-menu">
        <li class="dropdown">
          <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">
            Links<i class="mainnav-caret"></i>
          </a>
          <ul class="dropdown-menu" role="menu">

            <li>
              <a ui-sref="auth.add()">
              <i class="fa fa-users dropdown-icon" aria-hidden="true"></i>
              Link 1
              </a>
            </li>

            <li>
              <a ui-sref="auth.list()">
              <i class="fa fa-history dropdown-icon" aria-hidden="true"></i>
              Link 2
              </a>
            </li>
          </ul>
        </li>
      </ul>
    </nav>
</div>

参考订单：

<script src="bower_components/jquery.slimscroll/jquery.slimscroll.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="bower_components/bootstrap-datepicker/dist/locales/bootstrap-datepicker.pt-BR.min.js"></script>
<script src="bower_components/select2/dist/js/select2.min.js"></script>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-loading-bar/src/loading-bar.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.min.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="bower_components/angular-bootstrap-toggle/dist/angular-bootstrap-toggle.min.js"></script>
<script src="dist/app.min.js"></script>

JS：UI-Router config：

var app = angular.module('accountsMod');
app.config(function routeConfig ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise("/login");

$stateProvider
  .state('auth.add', {
        url: '/accounts/add',
        controller: 'AccountController',
        templateUrl: 'app/components/account/add.html'
    })
   .state('auth.list', {
        url: '/accounts/add',
        controller: 'AccountController',
        templateUrl: 'app/components/account/list.html'
    })

}

问题焦点是：当我根据手机上的自举提供的响应式设计触摸导航栏中的这些锚点时，菜单关闭，没有任何反复发生。

Answer 1

一个解决方案：我必须安装'angular-ui-bootstrap'软件包并进行一些更改，如下所示：

引用指令： var app = angular.module('accountsMod',['ui.router', 'ui.bootstrap']);
更换每个html标记以切换菜单，如下所示（关于评论中的旧标记）：

HTML： ` 切换导航

<nav class="mainnav-collapse collapse" role="navigation" aria-expanded="false" style="height: 0px;">
  <ul class="mainnav-menu">
    <li uib-dropdown> <!--OLD: <li class="dropdown">-->
      <a uib-dropdown-toggle> <!--OLD:<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">-->
        Links<i class="mainnav-caret"></i>
      </a>
      <ul uib-dropdown-menu><!--OLD: <ul class="dropdown-menu" role="menu">-->
        <li>
          <a ui-sref="auth.add()">
          <i class="fa fa-users dropdown-icon" aria-hidden="true"></i>
          Link 1
          </a>
        </li>

        <li>
          <a ui-sref="auth.list()">
          <i class="fa fa-history dropdown-icon" aria-hidden="true"></i>
          Link 2
          </a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

`

所以UI-SREF links开始在移动导航中工作!! TKS！

AngularJS ui-sref无法在navbar下拉列表中使用移动设备上的Bootstrap

1 个答案: