angularjs - Bootstrap nav-tabs not working with Angular $routeprovider -


i using angularjs , bootstrap. while using $routeprovider spa, using bootstrap layout. working fine.

however, trying use bootstrap nav-tabs have tab based navigations.

my html this:

        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">             <!-- brand , toggle grouped better mobile display -->             <div class="navbar-header">                 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">                     <span class="sr-only">toggle navigation</span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                     <span class="icon-bar"></span>                 </button>                 <a class="navbar-brand" href="#/mis"><i class="fa fa-tachometer"></i> trigonmeter</a>             </div>             <!-- collect nav links, forms, , other content toggling -->             <div id="navbar" class="navbar-collapse collapse">                 <ul id="tabs" class="nav navbar-nav nav-tabs container-fluid" data-tabs="tabs">                     <li class="active"><a data-target="#db" href="#db" data-toggle="tab">dashboard</a></li>                     <li><a data-target="#admin" href="#admin" data-toggle="tab">admin</a></li>                     <li><a data-target="#mis" href="#mis" data-toggle="tab">mis</a></li>                     <li><a data-target="#fin" href="#fin" data-toggle="tab">finance</a></li>                 </ul>                 <ul class="nav navbar-nav navbar-right">                     <li class="nav-link">hi {{globals.currentuser.username}}</li>                     <li><a href="#" class="nav-link" ng-click="logout()"><span class="glyphicon glyphicon-log-out"></span>logout</a></li>                 </ul>             </div>             <!-- /.navbar-collapse -->         </nav> 

for tabs. works fine. , following tab-content section:

        <div class="container-fluid">             <!--[if lt ie 7]>                 <p class="browsehappy">you using <strong>outdated</strong> browser. please <a href="http://browsehappy.com/">upgrade browser</a> improve experience.</p>             <![endif]-->             <div class="row">                 <div id="my-tab-content" class="tab-content col-sm-2 col-md-2 sidebar">                     <div class="tab-pane active" id="db">                         <h1>dashboard</h1>                         <ul>                             <li><a href="#/admin/org">organisation details</a></li>                             <li><a href="#/mis/jobno/">job numbers</a></li>                             <li><a href="#/mis/jobexpenses/">job expenses</a></li>                             <li><a href="#/mis/jobfindet/">job financial details</a></li>                             <li><a href="#/mis/contracts">contracts</a></li>                         </ul>                     </div>                     <div class="tab-pane" id="admin">                         <h1>admin</h1>                         <p><a href="#/admin/org" data-toggle="tab">organisation details</a></p>                     </div>                     <div class="tab-pane" id="mis">                         <h1>mis</h1>                         <ul>                             <li><a href="#/mis/jobno/" data-toggle="tab">job numbers</a></li>                             <li><a href="#/mis/jobexpenses/" data-toggle="tab">job expenses</a></li>                             <li><a href="#/mis/jobfindet/" data-toggle="tab">job financial details</a></li>                             <li><a href="#/mis/contracts" data-toggle="tab">contracts</a></li>                         </ul>                     </div>                     <div class="tab-pane" id="fin">                         <h1>finance</h1>                         <p>orange orange orange orange orange</p>                     </div>                 </div>                 <div class="col-sm-10 col-md-10">                     <div ng-view></div>                 </div>             </div>         </div> 

but tab-content section not working.

please let me know if explain problem.

is there way this?


Comments

Popular posts from this blog

ios - RestKit 0.20 — CoreData: error: Failed to call designated initializer on NSManagedObject class (again) -

java - Digest auth with Spring Security using javaconfig -

laravel - PDOException in Connector.php line 55: SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: YES) -