ui-sref在引导下拉菜单中不起作用

问题描述

header.html中有以下角度代码

I have the following angular code in header.html

           <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li ng-if='loginState.loggedIn' class="dropdown">
                        <a class="dropdown-toggle"
                            data-toggle="dropdown"
                            id="userDropdown"
                            role="button"
                            aria-haspopup="true" aria-expanded="false">
                            {{loginState.currentUser}} <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu" data-toggle="collapse" aria-labelledby="userDropdown">
                            <li><a ui-sref="app.profile">Your Profile</a></li>
                            <li><a ui-sref="app.settings">Settings</a></li>
                        </ul>
                    </li>
                    <!-- this would work
                    <li><a ui-sref="app.profile">Your Profile</a></li>
                    -->
                </ul>
            </div>

状态代码非常简单:

app.config(['$stateProvider', '$urlRouterProvider',
    function($stateProvider, $urlRouterProvider) {
    $stateProvider
    .state('app', {
        url: '/',
        views: {
            'header': {
                templateUrl: 'static/templates/header.html',
            },
            'content': {
                templateUrl: 'static/templates/landing.html',
            },
            'footer': {
                templateUrl: 'static/templates/footer.html',
            }
        }
    })
    .state('app.profile', {
        url: 'profile',
        views: {
            'content@': {
                templateUrl : 'static/templates/profile.html',
                controller  : 'ProfileController'
           }
        }
    })
    ;

    $urlRouterProvider.otherwise('/');
}])

因此基本上，一旦登录，我将从右上角有一个下拉菜单，并且我想在单击下拉菜单中的条目时转换为其他状态.

So basically once logged in, I would have a dropdown from the top right corner, and I want to transit to other states when clicking entries in dropdown menu.

但是，当单击Your Profile时，没有任何反应，状态尚未进入app.profile.如果我将ui-sref从下拉列表中移出并直接移到导航栏(如注释的代码)，则效果很好.

However, when clicking Your Profile nothing happens, the state has not gone to app.profile. If I move the ui-sref out of the dropdown and to the navbar directly(like the commented code), it works perfectly fine.

那么有什么办法可以阻止ui-sref在引导程序下拉列表中工作?

So is there something prevent ui-sref from working in a bootstrap dropdown?

推荐答案

我发现了问题，这是下拉菜单ul中的data-toggle属性，一旦删除，一切正常.

I found the problem, it's the data-toggle attribute in the dropdown menu ul, once it's removed everything works fine.

我不知道为什么它会阻止ui-sref起作用，以为它只会折叠菜单.

I don't know why it would prevent ui-sref from working, thought it would just collapse the menu.

仅当我在ui-router之后加载jquery时，该问题才可重现:

The problem is reproducible only if I load jquery after ui-router:

  <script src="//npmcdn.com/angular-ui-router@latest/release/angular-ui-router.js"></script>
  <script data-require="jquery@2.2.0" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

如果我交换订单，它就可以正常工作.

If I swap the order it works fine.

这篇关于ui-sref在引导下拉菜单中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！