Question

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

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

然而，当点击Your Profile没有任何反应时，状态还没有进入app.profile。如果我将ui-sref移出下拉列表并直接移动到导航栏（如注释代码），它的工作原理非常好。

那么是否阻止ui-sref在引导程序下拉列表中工作？

Answer 1

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

我不知道为什么它会阻止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>

如果我更换订单，它可以正常工作。

ui-sref无法在bootstrap下拉列表中工作

1 个答案: