Menu
I am trying to get a bootstrap navbar working with angularjs. I would like to have the navbar in the index.html and the rest of the content for each tab in the navbar in its own respective partial. I am having trouble getting the partials to show up.
http://plnkr.co/edit/sKJU4nrNYV56uJQG4Lvw?p=preview
649
To accomplish this task, you can use ng-controller(NavigationController) to set the bootstrap navbar active class with AngularJS. To run a single controller outside ng-view. You can set class= “active” when the angular route is clicked.
June 20, 2022 Web, Angular 0 Comments. A NavBar is an HTML element for your main and sub navigation elements. What makes a real navigation bar is the theming—and dozens of UX frameworks make this easy.
To set the active class to the navigation menu dynamically by scrolling or clicking on the navigation links, the active class is to be set on each section depending on the position of the webpage. To add methods and variables, JavaScript is used.
There are couple of issues of you code. Please compare my fix with your version. (Plnkr)
ng-view in the html page and make sure it is inside the scope of NavCtrl
193
I strictly recommend you to switch from pure bootstrap to AngularJS compatible bootstrap.
for example - http://mgcrea.github.io/angular-strap/#/navbar
27
I know the post is a bit old, but may be can help someone else navbar menu
It is a navbar with a couple of drop down menu implemented in AngularJS, Boostrap CSS and angular-ui. Drop down menu is created by recursive call in a custom directive.
The index.html:
<body>
<h1>Hello Navbar</h1>
<div ng-app="my-app">
<div ng-controller="treeController">
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<span>Brand</span>
</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown" dropdown on-toggle="toggled(open)">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button">
Dropdown
<span class='caret'></span>
</a>
<tree tree='tree'></tree>
</li>
<li class="dropdown" dropdown on-toggle="toggled(open)">
<a href="#" class="dropdown-toggle" dropdown-toggle role="button">
Just a clone
<span class='caret'></span>
</a>
<tree tree='tree'></tree>
</li>
</ul>
</nav>
</div>
</div>
</body>
The script.js:
var app = angular.module('my-app', ['ui.bootstrap']);
app.controller('treeController', function($scope) {
$scope.callMe = function() {
alert("test");
};
$scope.tree = [{
name: "Bob",
link: "#",
subtree: [{
name: "Ann",
link: "#"
}]
}, {
name: "Jon",
link: "#",
subtree: [{
name: "Mary",
link: "#"
}]
}, {
name: "divider",
link: "#"
}, {
name: "Another person",
link: "#"
}, {
name: "divider",
link: "#"
},{
name: "Again another person",
link: "#"
}];
});
app.directive('tree', function() {
return {
restrict: "E",
replace: true,
scope: {
tree: '='
},
templateUrl: 'template-ul.html'
};
});
app.directive('leaf', function($compile) {
return {
restrict: "E",
replace: true,
scope: {
leaf: "="
},
templateUrl: 'template-li.html',
link: function(scope, element, attrs) {
if (angular.isArray(scope.leaf.subtree)) {
element.append("<tree tree='leaf.subtree'></tree>");
element.addClass('dropdown-submenu');
$compile(element.contents())(scope);
} else {
element.bind('click', function() {
alert("You have clicked on " + scope.leaf.name);
});
}
}
};
});
And finally the two templates:
<ul class='dropdown-menu'>
<leaf ng-repeat='leaf in tree' leaf='leaf'></leaf>
</ul>
<li ng-class="{divider: leaf.name == 'divider'}">
<a ng-if="leaf.name != 'divider'">{{leaf.name}}</a>
</li>
I hope it helps.
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
