Как предотвратить верхнего уровня начальной загрузки навигационной панели элементов из изменения URL

Question

Я собираю Угловое приложение, в котором я пытаюсь использовать бар самозагрузки нав следующим образом:

<div class="navbar" > 
     <div class="navbar-inner"> 
      <div class="container"> 
       <!--<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">--> 
        <a class="btn btn-navbar"> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </a> 
       <div class="nav-collapse" > 
         <ul class="nav"> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Customer Instances <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#/itarList">iTAR</a></li> 
            <li class="divider"></li> 
            <li><a href="#/nonItarList">Non-iTAR</a></li> 
           </ul> 
          </li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Training & Documentation <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#/videoTutorials">Video Tutorials</a></li> 
            <li><a href="#/taskBasedHelp">Task-Based Help</a></li> 
            <li class="divider"></li> 
            <li><a href="#/documentTemplates">Document Templates</a></li> 
            <li><a href="#/artifactSamples">Artifact Samples</a></li> 
           </ul> 
          </li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Service Requests <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#/viewExistingRequests">View Existing Requests</a></li> 
            <li class="divider"></li> 
            <li><a href="#/enterNewRequest">Enter New Request</a></li> 
           </ul> 
          </li> 
          <li class="dropdown"> 
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Development Tracker <b class="caret"></b></a> 
           <ul class="dropdown-menu"> 
            <li><a href="#/viewBacklogItems">View Backlog Items</a></li> 
            <li><a href="#/viewFeatureReleaseSchedule">View Feature Release Schedule</a></li> 
            <li class="divider"></li> 
            <li><a href="#/viewListOfSuggestedEnhancements">View List Of Suggested Enhancements</a></li> 
            <li><a href="#/suggetAnEnhancement">Suggest An Enhancement</a></li> 
            <li class="divider"></li> 
            <li><a href="#/viewActiveBugReports">View Active Bug Reports</a></li> 
            <li><a href="#/reportABug">Report A Bug</a></li> 
           </ul> 
          </li> 
         </ul> 
        <ul class="nav pull-right"> 
         <li class="divider-vertical"></li> 
         <li class="dropdown"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Site Administration <b class="caret"></b></a> 
          <ul class="dropdown-menu"> 
           <li><a href="#/userAdministration">User Administration</a></li> 
           <li class="divider"></li> 
           <li><a href="#/instanceAdministration">Instance Administration</a></li> 
           <li class="divider"></li> 
           <li><a href="#/applicationAdministration">Application Administration</a></li> 
          </ul> 
         </li> 
        </ul> 
       </div> 
      </div> 
     </div> 
    </div> 

Как это стоит нежелательное поведение: при нажатии на элемент навигации верхнего уровня (например, «Экземпляры клиента» или «Обучение & Документация») URL-адрес страницы немедленно восстанавливается до «MainPage», даже до выбора навигации сделан. Я прошу посоветовать, как предотвратить такое поведение.

Answer 1

Вы должны удалить все href="#" деталей. Согласно ui-bootstrap, вы можете добавить стиль к элементам:

.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }