Navigation.html contents
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<div ng-include="AnnonymousTopHeaderUrl"></div>
</ul>
</div>
AnnonymousNavigation.html contents
<li>
<a target="_self" href="#Register">Register</a>
</li>
Base Controller is here
myApp.controller("BaseController", ["$scope", function($scope) {
$scope.AnnonymousTopHeaderUrl = "App/Include/AnnonymousNavigation.html";
}]);
When I run the code, it shows below Html
<ul class="nav navbar-nav navbar-right">
<!-- ngInclude: AnnonymousTopHeaderUrl -->
<div ng-include="AnnonymousTopHeaderUrl" class="ng-scope">
<li class="ng-scope">
<a target="_self" href="#Register">Register</a>
</li>
</div>
</ul>
I was expecting below Html
<ul class="nav navbar-nav navbar-right">
<li>
<a target="_self" href="#Register">Register</a>
</li>
</ul>
Is there any way to get the expected Html?
You should just place ng-include directive over ul element, so that it will not create unnecessary div element inside ul.
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<ul class="nav navbar-nav navbar-right" ng-include="AnnonymousTopHeaderUrl">
</ul>
</div>
Related
I am trying to setup HTML bootstrap tabs, the most basic possible ones:
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>
</div>
But because of routerlink in angular, I get redirected to https://localhost:5001/#profile instead of the div I am trying to open. I don't want to turn off routerlink because it is the main form of navigation for my site. I just want this one navbar to not use it. I haven't been able to find any way around this... Hopeful for an html solution, but open to anything :)
Use routerLink instead of href.
See Angular RouterLink.
I'm trying to include two submenu inside a sidebar. However, I have not been getting consistent result for the dropdown. On my 10 attempts of loading/refreshing, the sub-menu drop down only works 4/10 times. Does anyone have an idea why it is producing such results?
There's no error on console either.
Also, I'm using AngularJS to include this sidebar into my main html code.
Code for Sidebar, sidebar.html
<div class="col-md-2"><!--grid 2 for bootstrap -->
<div class="sidebar content-box" style="display: block;">
<ul class="nav">
<!-- Main menu -->
<li class="current"><i class="glyphicon glyphicon-home"></i> Dashboard</li>
<br>
<li><i class="glyphicon glyphicon-calendar"></i> Calendar</li>
<br>
<li><i class="glyphicon glyphicon-stats"></i> Stats</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> List
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 1</li>
<li>Sub Function 2</li>
<li>Sub Function 3</li>
<li>Sub Function 4</li>
</ul>
</li>
<br>
<li class="submenu">
<a href="">
<i class="glyphicon glyphicon-list"></i> Function 5
<span class="caret pull-right"></span>
</a>
<!-- Sub menu -->
<ul>
<li>Sub Function 5</li>
<li>Sub Function 6</li>
<li>Sub Function 7</li>
</ul>
</li>
</ul>
</div>
</div>
AngularJS part to incldue sidebar
<!--Include header-->
<div ng-include src="'views/templates/header.html'"></div>
<!--end of header-->
<div class="page-content">
<div class="row">
<!-- Insert Side bar-->
<div ng-include src="'views/templates/sidebar.html'"></div>
<div class="col-md-10"><!--Main content -->
<div class="row">
<!-- to display content here -->
</div>
</div>
</div>
</div>
Not sure what went wrong.
Pls can some help with this. View the website i'm working on on the mobile phone i observed the menu is showing without clicking the menu icon and covering my content. What can i do do solve this. Here is my code. I'm working with foundation 5
<!-- tab bar navigation -->
<nav class="tab-bar hide-for-medium-up">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li>Home</li>
<li>About</li>
<li>Store</li>
<li>Our Clients</li>
<li>Contact</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
Thanks
Here is your answer....
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.css">
<div class="large-12 columns">
<nav class="top-bar" data-topbar="" role="navigation">
<ul class="title-area">
<li class="name">
<h1>My Site</h1>
</li>
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
<section class="top-bar-section">
<!-- Right Nav Section -->
<ul class="right show-for-large-up">
<li class="active">Right Button Active</li>
<li class="has-dropdown not-click">
Right Button Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Button Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<ul class="right hide-for-large-up">
<li class="active">Right Button</li>
<li class="has-dropdown not-click">
Right Dropdown
<ul class="dropdown"><li class="title back js-generated"><h5>Back</h5></li><li class="parent-link hide-for-medium-up"><a class="parent-link js-generated" href="#">Right Dropdown</a></li>
<li>First link in dropdown</li>
<li class="active">Active link in dropdown</li>
</ul>
</li>
</ul>
<!-- Left Nav Section -->
<ul class="left show-for-large-up">
<li>Left Button</li>
</ul>
</section></nav>
</div>
I am using Bootstrap and Angular and I have the following HTML:
<ul class="nav nav-tabs">
<li class="active"><a data-target="#" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I want to visualize both #tab1 and #tab2 when the "All" tab is clicked. How do I achieve this with Bootstrap and Angular?
I found the solution in this answer.
<ul class="nav nav-tabs">
<li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li>
<li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li>
<li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div>
<div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div>
</div>
I just set the data-target of the "All" tab to a CSS class, that is present in all of my tabs. It doesn't have to be exactly 'tab-pane', you can use your own class - 'foo' or 'bar'. It's a nice and simple solution, as no external libraries are required to achieve this.
Now I want to toggle class with ng-class, but now I am stuck with tab which has sub <a>. Here is Html
<ul class="nav navbar-nav navbar-right">
<li ng-class="{active:isActive('/home')}"><a ui-sref='home'>Home</a>
</li>
<li ng-class="{active:isActive('/ebin'||'/reports')}" class="dropdown">Expenses<span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a ui-sref='ebin'>My Expenses</a>
</li>
<li><a ui-sref='reports'>Expense Reports</a>
</li>
</ul>
</li>
<li ng-class="{active:isActive('/settings')}"><a ui-sref='settings' translate="SETTINGS">Settings</a>
</li>
</ul>
JS part:
$scope.isActive = function(route) {
return route === $location.path();
}
The issue I have here is the ng-class only work for /home and /setting, but doesn't work for dropdown menu. any Idea?
The issue is with the parameter you are passing "isActive('/ebin'||'/reports')". This is not a valid string.
What you could do is this:
ng-class="{'active':isActive('/ebin'), 'active':isActive('/reports')}"