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
Post a Comment