I have an issue with my navbar updating...After login with my credentials my navbar is not updating..however my response is success..but how to update change my header..it have to show logout after login..Her is my Html code.How to write authentication for this..Please help me out.I am at end of my project..
<div ng-controller="NavbarCtrl" class="navbar navbar-default navbar-static-top" id="header">
<div class="container">
<div class="navbar-header">
<button type="button" data-toggle="collapse" data-target="#navbar" class="navbar-toggle collapsed">
<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="#/"><i class="ion-ios7-pulse-strong">Onio</i><img src="images/onio1.png"/></a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul ng-if="isAuthenticated()" class="nav navbar-nav">
<li>Home</li>
<li >About</li>
<li >Products</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-left">
<li>Home</li>
<li >About</li>
</ul>
<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">
<li>Login</li>
<li>Sign up</li>
</ul>
<ul ng-if="isAuthenticated()" class="nav navbar-nav pull-right">
<li>Logout</li>
<li><a href="#" data-toggle="dropdown" class="navbar-avatar dropdown-toggle">Welcome, {{userInfo}}
</a></li>
</ul>
<!--<ul ng-if="!isAuthenticated()" class="nav navbar-nav pull-right">-->
<!--<!–<li><button class="btn btn-facebook" ng-click="fbLogoutUser()">FBLogOut</button></li>–>-->
<!--<li class="fb-login-button" data-max-rows="1" ng-click="FBLogin()" data-size="large" data-show-faces="false"> </li>-->
<!--</ul>-->
</div>
</div>
I am new to angularui and I am trying to create an menu with dropdown.
I have seen an example that works with 0.6.0 version of angularui and angularjs 1.1.5 the dropdown menus work
<html ng-app="plunker">
<body ng-controller="MainCtrl">
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" ng-init="navCollapsed = true"
ng-click="navCollapsed = !navCollapsed">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" ng-class="!navCollapsed && 'in'">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
<p>Hello {{name}}!</p>
</body>
</html>
full example in http://plnkr.co/edit/HkwfL9
However, when I change the dependencies, to angularjs 1.5.5 and angularui 1.3.3 the view is as expected but the dropdowns do not work (http://plnkr.co/edit/rNaNj8gqnrwOwOVnGlD2)
I would greatly appreciate if someone could help me with this.
Thanks a million!
The following is the partial view that I'm using. Somehow the 'ng-scope' class is not added automatically to every HTML tag. Could someone tell me what might be the cause of this? I know angular.js adds class conditionally but I don't know how to fix this.
<div class="my-photo-header">
<div class="container">
<a class="navbar-brand my-navbar-brand">
<span class="glyphicon glyphicon-pencil"></span>
</a>
<form class="navbar-form my-navbar-form navbar-left" role="search">
<div>
<input id="photo-title" type="text" class="form-control" placeholder="Untitled"
title="Edit your photo title here." value="TITLE">
</div>
</form>
<ul id="photo-title-header" class="nav nav-tabs">
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
File <span class="caret"></span>
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>
<a>Save</a>
</li>
<li>
<a ng-click="vm.haha()">Upload</a>
<input type="file" upload-image="uploadImage"/>
</li>
<li><a>Open</a></li>
<li><a>Invite</a></li>
<li role="separator" class="divider"></li>
<li><a>Export as<span class="caret"></span></a></li>
<li><a>Print</a></li>
</ul>
</li>
<!-- Please change TODO to display the number, and maybe change style to not be a tab -->
<li role="listitem"><a>{{TODO}} revisions</a></li>
<li>Logout</li>
</ul>
</div>
</div>
I have a responsive fixed-top navbar (using Twitter Bootstrap 3) as follows:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header"><img src="/images/citylightslogo.png" alt="logo" id="cllogo"/>
</div>
**<h1 id="topline2">• Tagline1 </h1>
<h1 id="topline3">• Address • Call Anytime! xxx xxx xxxx </h1>
<div id="adspace" >
<h1 id="headline33" class =".visible-xs" >100% Satisfaction Guaranteed! Call us Anytime! </h1>
</div>
<div id="logospace"><img src="/images/ab2.gif" alt="logo" id="alogo2"/><img src="/images/ab2.gif" alt="logo" id="alogo3"/>
</div>**
</div>
</div>
I just want to make sure that I am learning this correctly: Currently, the elements in bold above overflow all over the place (into other rows) when collapsed.
Question: How could I make sure that they are either invisible when collapsed or partially visible in mobile or tablet screens when collapsed?
Is the fact that I am not including those elements in the "navabar-header" class the problem or should I be wrapping them in a separate div to begin with (if so what div?)?
It seems the bootstrap docs are focused on explaining how to make navbar links responsive and I cannot seem to find anything on making non-link content (like headers) responsive as well.
Thanks!
Dont understand the goal entirely but let me take a crack at it... It sounds like you want more than just menu items to collapse...Right? Great! See below
--> http://www.bootply.com/118940
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
<li class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<div class="col-sm-3 col-md-3">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
everything inside of
class="collapse navbar-collapse"
will collapse...
see it here --> http://www.bootply.com/118940
So the problem comes when trying the project I'm working on the phone, the links I have inside my navbar are all with hash tag links (#) since it's AngularJS... Now I did find a way to make it to work perfectly in jQuery
$('.nav li a').not('.dropdown-toggle').on('click', function(){
$('.navbar-ex1-collapse').removeClass('in').addClass('collapse');
});
but since they always say to stop using plain jQuery or DOM manipulation...so how am I suppose to do this? I'm new to AngularJS and I'm not to good at starting to create my own directive, or should I just have $watch? but then how can I watch a certain class to be clicked then? I tried to do this example twitter-boostrap-navbar-with-angular-js-collapse-not-functioning but it was made specifically for Bootstrap 2.3 and some properties have changed too, so I'm getting a little confused. I could leave the jQuery, but you know...I'm trying to learn the proper way of doing... :)
Oh and if that help, my navbar Bootstrap 3 menu looks like this
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
Portfolio<b class="caret"></b>
<ul class="dropdown-menu">
<li>Add</li>
<li>Undo</li>
<li>List</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
Probably a bit late, but here is a bootstrap 3.x version of the answer I gave in the question you referenced - http://jsfiddle.net/N99dQ/
This time, I have used ng-init instead of a controller, but both ways will work. Also worth mentioning, if you are not using the dropdowns, you'll only need to include ['ui.bootstrap.collapse']
HTML:
<nav id="navbar-example" class="navbar navbar-inverse navbar-static" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-init="isCollapsed = true" ng-click="isCollapsed = !isCollapsed">
<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="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container-fluid -->
</nav>
Javascript:
var myApp = angular.module('myApp', ['ui.bootstrap']);
As an alternate to my previous answer, this one uses ng-repeat to condense the html. http://jsfiddle.net/m5TZw/
HTML
<div class="container-fluid">
<div class="navbar-header">
<button class="navbar-toggle" type="button" ng-click="isCollapsed = !isCollapsed">
<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="#">Project Name</a>
</div>
<div collapse="isCollapsed" class="navbar-collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
<li class="dropdown">
Dropdown 2 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="fat-menu" class="dropdown">
Dropdown 3 <b class="caret"></b>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<li ng-repeat="m in menu1" role="presentation"><a ng-click="go(m.link)" role="menuitem" tabindex="-1">{{m.text}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
JS
var myApp = angular.module('myApp', ['ui.bootstrap.collapse', 'ui.bootstrap.dropdownToggle']);
function NavBarCtrl($scope, $location) {
$scope.isCollapsed = true;
$scope.menu1 = [
{text: 'first', link : '/first'},
{text: 'second', link : '/second'},
{text: 'third', link : '/third'},
{text: 'fourth', link : '/fourth'},
{text: 'fifth', link : '/fifth'}
];
$scope.go = function(path) {
$scope.isCollapsed = true;
$location.path('#/' + path);
}
}
Rather importing a heavy "ui.bootstrap" I feel that this will be simple JS fix:
//for close, opened dropdown.
$(".nav a").click(function () {
if ($(".navbar-collapse").hasClass("in")) {
$('[data-toggle="collapse"]').click();
}
});
If this code is not working correctly then see that it's binding correctly, so place it in controller that loads page.