Bootstrap navbar with angularjs
Bootstrap navbar with angularjs
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 Angularjss scope not html.
I strictly recommend you to switch from pure bootstrap to AngularJS compatible bootstrap.
for example – http://mgcrea.github.io/angular-strap/#/navbar
Bootstrap navbar with angularjs
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.