Menu
I've created an angular application that uses Twitter bootstrap.
I would like dynamic links in the navbar (like ng-href="#/{{course.id}}"
They never render - they end up like href="#/"
If I put the navbar inside the <div ng-view> section of the page they do render, although I'd rather not put it there since I don't want to duplicate it on each partial.
The basic page is laid out like this:
<html ng-app="studentApp">
<head> links to cdns here</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-inverse navbar-fixed-top">Dynamic bar here</div>
<div ng-view>Partials in here</div>
</div>
</body>
</html>
For all partials that load in the ng-view portion, the interpolation happens as expected, but not in the navbar.
I created a Plunker rather than trying to include everything here. (http://plnkr.co/MK8QEDQUVawkOi92xJXk).
719
Angular will only work inside the ng-view once you start using routing.
I have only this in the containing page:
// links to cdn, js, css
<body>
<div id="app-container" ng-app="dashboard" ng-view></div>
</body>
All the partials show up inside the div.
All partials include the navigation partial at the very top:
<div ng-include src="'html/navigation.html'"></div>
navigation.html has its own controller:
<div id="nav-bars-container" ng-controller="NavCtrl">
<a href="#/{{course.id}}">Foo</a>
</div>
& thus has its own scope. Others can be injected:
function NavCtrl($scope, $route, $routeParams) {
console.log($routeParams);
$scope.course.id = $routeParams.id;
}
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
