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.
Add a comment
|
3 Answers
There are couple of issues of you code. Please compare my fix with your version. (Plnkr)
- You should use config() to register the routing rules.
- You need put
ng-viewin the html page and make sure it is inside the scope ofNavCtrl - The controller name in the routing rules should be a string. You missed the quotes.
- You should use ng-click to trigger to load the page rather than href. Keep in mind, the routing is in Angularjs's scope not html.
2 Comments
Gerben Rampaart
+1 for the insightful "Keep in mind, the routing is in Angularjs's scope not html."
oshliaer
Is there a one way? How can I do it by $routeProvider?
I strictly recommend you to switch from pure bootstrap to AngularJS compatible bootstrap.
for example - http://mgcrea.github.io/angular-strap/#/navbar
3 Comments
lostintranslation
Agreed long run this looks like a great thing to use. I am still learning angular so doing somethings on my own first so I understand the framework is important to me.
Erik Honn
In that case, don't use bootstrap. Bootstrap and Angular will not always play nice if you use the regular version, and most of the stuff bootstrap can do can already be done in Angular. That's not to say one should never use Bootrap with Angular of course, but if you are out to learn you should learn to do things the Angular way before you introduce Bootstrap.
Good point. I came across this when looking for my own solution but wanted to use angular-ui-router. FWIW, I created a basic directive that uses angular-ui-router and not much else to give you control over your bootstrap navbar: cr-bootstrap-navbar
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.
