Skip to content

Instantly share code, notes, and snippets.

@teeaich
Created August 19, 2013 17:42
Show Gist options
  • Save teeaich/6271925 to your computer and use it in GitHub Desktop.
Save teeaich/6271925 to your computer and use it in GitHub Desktop.
angular breadcrumb
<div class="navbar" ng-controller="HeaderCtrl">
<div class="navbar-inner">
<a class="brand" ng-click="home()">AScrum</a>
<ul class="nav">
<li ng-class="{active:isNavbarActive('projectsinfo')}"><a href="/projectsinfo">Current Projects</a></li>
</ul>
<ul class="nav" ng-show="isAuthenticated()">
<li ng-class="{active:isNavbarActive('projects')}"><a href="/projects">My Projects</a></li>
<li class="dropdown" ng-class="{active:isNavbarActive('admin'), open:isAdminOpen}" ng-show="isAdmin()">
<a id="adminmenu" role="button" class="dropdown-toggle" ng-click="isAdminOpen=!isAdminOpen">Admin<b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="adminmenu">
<li><a tabindex="-1" href="/admin/projects" ng-click="isAdminOpen=false">Manage Projects</a></li>
<li><a tabindex="-1" href="/admin/users" ng-click="isAdminOpen=false">Manage Users</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right" ng-show="hasPendingRequests()">
<li class="divider-vertical"></li>
<li><a href="#"><img src="/static/img/spinner.gif"></a></li>
</ul>
<login-toolbar></login-toolbar>
</div>
<div>
<ul class="breadcrumb">
<li ng-repeat="breadcrumb in breadcrumbs.getAll()">
<span class="divider">/</span>
<ng-switch on="$last">
<span ng-switch-when="true">{{breadcrumb.name}}</span>
<span ng-switch-default><a href="{{breadcrumb.path}}">{{breadcrumb.name}}</a></span>
</ng-switch>
</li>
</ul>
</div>
</div>
angular.module('services.breadcrumbs', []);
angular.module('services.breadcrumbs').factory('breadcrumbs', ['$rootScope', '$location', function($rootScope, $location){
var breadcrumbs = [];
var breadcrumbsService = {};
//we want to update breadcrumbs only when a route is actually changed
//as $location.path() will get updated imediatelly (even if route change fails!)
$rootScope.$on('$routeChangeSuccess', function(event, current){
var pathElements = $location.path().split('/'), result = [], i;
var breadcrumbPath = function (index) {
return '/' + (pathElements.slice(0, index + 1)).join('/');
};
pathElements.shift();
for (i=0; i<pathElements.length; i++) {
result.push({name: pathElements[i], path: breadcrumbPath(i)});
}
breadcrumbs = result;
});
breadcrumbsService.getAll = function() {
return breadcrumbs;
};
breadcrumbsService.getFirst = function() {
return breadcrumbs[0] || {};
};
return breadcrumbsService;
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment