javascript - ui-sref 在引导下拉列表中不起作用

Question

我在 header.html 中有以下 Angular 代码

           <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('/');                                          
}])

所以基本上一旦登录，我就会从右上角看到一个下拉菜单，并且我想在单击下拉菜单中的条目时转换到其他状态。

但是，当单击您的个人资料时，没有任何反应，状态尚未转到 app.profile。如果我将 ui-sref 从下拉列表中移出并直接移至导航栏(如注释代码)，它工作得很好。

那么有什么东西会阻止 ui-sref 在引导下拉列表中工作吗？

Answer 1

我发现了问题，问题出在下拉菜单 ul 中的 data-toggle 属性，删除后一切正常。

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

编辑:

只有当我在 ui-router 之后加载 jquery 时，问题才会重现:

  <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>

如果我交换顺序，它就可以正常工作。