href не работает как ожидалось

Question

Я использую этот фрагмент от HERE. Он выглядит нормально, но когда я нажимаю на вкладку, вместо изменения содержимого тела (<a href="#tab2success" data-toggle="tab">), он перенаправляет на localhost: 9000/# tab2success, которого не существует. Как это можно достичь? Я просто хочу, чтобы при нажатии на вкладку оно попадало в конкретный контент в теле. Похоже, что href не решение здесь ...

<div class="col-md-9"> 

     <div class="panel with-nav-tabs panel-success"> 
      <div class="panel-heading"> 
        <ul class="nav nav-tabs"> 
         <li class="active"><a href="#tab1success" data-toggle="tab">Success 1</a></li> 
         <li><a href="#tab2success" data-toggle="tab">Success 2</a></li> 
         <li><a href="#tab3success" data-toggle="tab">Success 3</a></li> 
        </ul> 
      </div> 
      <div class="panel-body"> 
       <div class="tab-content"> 
        <div class="tab-pane fade in active" id="tab1success">Success 1</div> 
        <div class="tab-pane fade" id="tab2success">Success 2</div> 
        <div class="tab-pane fade" id="tab3success">Success 3</div> 
       </div> 
      </div> 

PD: Я использую angularJS, так что если есть какие-либо директивы или что-то, что может помочь, это может быть также допустимым вариантом.

EDIT: Часть моей реализации маршрутизатора. Это просто о части кода, потому что это слишком Лонго, чтобы получить возможность отправлять все это ..

angular 
 
    .module('Test', [ //setting a module 
 
    'oc.lazyLoad', 
 
    'ui.router', 
 
    'ui.bootstrap', 
 
    'angular-loading-bar' 
 
    ]) 
 
    .config(['$stateProvider', '$urlRouterProvider', '$ocLazyLoadProvider', function ($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) { 
 

 
     $ocLazyLoadProvider.config({ 
 
      //$ocLazyLoad returns a promise that will be rejected when there is an error but if you set debug to true,      //$ocLazyLoad will also log all errors to the console. 
 

 
      debug: false, 
 
      events: true, 
 
     }); 
 

 
     // For any unmatched url, redirect to '/dashboard/home' 
 
     $urlRouterProvider.otherwise('/dashboard/rank'); 
 

 
     // Now we set up the states 
 
     $stateProvider 
 
      .state('dashboard', { //parent view 
 
       url: '/dashboard', 
 
       templateUrl: 'views/dashboard/main.html',

Answer 1

Это нормальное поведение для href.

Чтобы решить ваш вопрос, пожалуйста, обратитесь к этой статье: Nav tabs in Angular

В принципе, есть флаг, который управляет видимостью вкладок и ng-click события, которое будет обновлять значение флага.

После того, как значение модели (флага) было обновлено, оно автоматически обновит представление.

Answer 2

Это точно ожидаемое поведение href - если вы не предоставите полный URL, он добавит его на ваш текущий URL (я предполагаю, что вы используете localhost: 9000 при разработке). Посмотрите на this link, в котором объясняется, как использовать его правильно, используя директиву ng-href.

Подводя итог, необходимо использовать формат «Рули» внутри ng-href директивы:

<a ng-href="{{/#tab2success}}" data-toggle="tab"> 

Answer 3

Там нет необходимости для любого углового кода или overcomplications. Вам просто не хватает файла bootstrap.js, в котором работают вкладки.

Убедитесь, что вы используете правильные классы tab markup, импортируйте файл JS в конце body вашего документа, и все.

Подробнее о вкладках Bootstrap, разметке и способах их работы можно найти в файле official Bootstrap documentation.