<!DOCTYPE html>
<html ng-app="navApp">
<head>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<script src="http://code.angularjs.org/1.2.0-rc.3/angular-route.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="NavCtrl">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<nav-bar
brand="model.brand"
link-map="model.linkMap"
drop-link-map="model.dropLinkMap"
search-fn="actions.search(input)" search-input="model.searchInput"
property="property">
</nav-bar>
</nav>
<div class="container">
<div class="page-header" style="padding-top: 20px;">
<h1>Angular Nav Bar <small>with Twitter Bootstrap</small></h1>
</div>
<div ng-view></div>
</div>
</body>
</html>
var app = angular.module('navApp', ['ngRoute']);
app.config(function($routeProvider) {
$routeProvider.when('/', {template: 'Gutten'});
$routeProvider.when('/en', {template: 'Hello'});
$routeProvider.when('/es', {template: 'Hola'});
$routeProvider.otherwise({redirectTo: '/'});
});
app.controller('NavCtrl', function($scope) {
$scope.model = {
searchInput: '',
dropLinkMap: [
{href: 'http://google.com', tag: 'Google'},
{href: 'http://yahoo.com', tag: 'Yahoo'}
],
linkMap: [
{href: '#/', tag: 'Base'},
{href: '#/en', tag: 'En'}
],
brand: {
href: '#/',
tag: 'Angular'
}
};
$scope.actions = {
search: function(input) {
console.log(input);
}
};
$scope.property = {
search: {
placeholder: 'Search',
submit: 'Go'
},
dropdown: {
dropdownLabel: 'Drops'
}
};
});
app.directive('navBar', function() {
return {
restrict: 'E',
transclude: false,
replace: false,
scope: {
searchFn: '&',
searchInput: '=',
property: '=',
dropLinkMap: '=',
linkMap: '=',
brand: '='
},
template: '<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>' +
'<a ng-show="brand !== undefined" class="navbar-brand" ng-href="{{brand.href}}">{{brand.tag}}</a>' +
'</div>' +
'<div class="collapse navbar-collapse navbar-ex1-collapse">' +
'<ul class="nav navbar-nav">' +
'<nav-links link-map="linkMap" ng-show="linkMap !== undefined"></nav-links><nav-dropdown-menu ng-show="dropLinkMap !== undefined" drop-link-map="dropLinkMap" property="property.dropdown"></nav-dropdown-menu>' +
'</ul>' +
'<nav-search-form ng-show="(searchFn !== undefined) && (searchInput !== undefined) "search-fn="searchFn({\'input\':searchInput})" search-input="searchInput" property="property.search"></nav-search-form>' +
'</div>'
}
});
app.directive('navSearchForm', function() {
return {
restrict: 'E',
transclude: false,
replace: true,
scope: {
searchFn: '&',
searchInput: '=',
property: '='
},
template: '<form class="navbar-form navbar-right" role="search" ng-submit="searchFn({\'input\':searchInput})">' +
'<div class="form-group">' +
'<input type="text" class="form-control" placeholder="{{property.placeholder}}" ng-model="searchInput">' +
'</div>' +
'<button type="submit" class="btn btn-default">{{property.submit}}</button>' +
'</form>'
};
});
app.directive('navDropdownMenu', function() {
return {
restrict: 'E',
transclude: false,
replace: true,
scope: {
property: '=',
dropLinkMap: '='
},
template: '<li class="dropdown">' +
'<a class="dropdown-toggle" data-toggle="dropdown">{{property.dropdownLabel}} <b class="caret"></b></a>' +
'<ul class="dropdown-menu">' +
'<li ng-repeat="link in dropLinkMap"><a ng-href="{{link.href}}">{{link.tag}}</a></li>' +
'</ul>' +
'</li>'
};
});
app.directive('navLinks', ['$location' ,function($location) {
return {
restrict: 'E',
transclude: false,
replace: true,
scope: {
linkMap: '='
},
template: '<li ng-repeat="link in linkMap" ng-class="{\'active\': link.active}"><a ng-href="{{link.href}}">{{link.tag}}</a></li>',
controller: function() {
this.updateActive = function(linkMap) {
var length = linkMap.length;
var i;
var actualPath = '#' + $location.path();
for(i=0 ; i<length ; i++) {
if(linkMap[i].href === actualPath) {
linkMap[i].active = true;
} else {
linkMap[i].active = false;
}
}
}
},
link: function(scope, elm, attr, ctrl) {
scope.$on('$routeChangeSuccess', function() {
ctrl.updateActive(scope.linkMap);
});
}
};
}]);
/* Styles go here */