Dynamic links in Twitter Bootstrap navbar in angularjs

Question

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).

removing height:0 and overflow:hidden from .nav-collapse, .nav-collapse.collapse class shows the nav bar.. — Rajkamal Subramanian
– Rajkamal Subramanian, Commented May 1, 2013 at 20:41

Foo L · Accepted Answer · 2013-05-03 09:03:54Z

6

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;
}

edited May 3, 2013 at 9:03

answered May 1, 2013 at 20:43

Foo L

11.1k8 gold badges43 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

BBarker Over a year ago

Thanks, @flim. This is very helpful. I did not know about ng-include. The addition of the separate controller in the navbar helped me better understand controllers and routes. I've updated the plunker (plnkr.co/edit/MK8QEDQUVawkOi92xJXk) with the changes (except the app location). The navbar picks up the routeParams and behaves like I want it to. Per rajkamal I removed the responsive components from the style so the entire nav would render in the preview mode (rather than fullscreen), though it does wrap in a small width.

Foo L Over a year ago

You're welcome! It was a brainteaser for me as well. Took me a bit to figure this pattern. I'm open to more elegant (DRY) solutions other than ng-include the navigation.html in all partials, but it is an easy solution.

PW Kad Over a year ago

For clarification (for me and future readers) you can't just use a partial view once and have it persist, it needs to be used on each page is that correct?

Foo L Over a year ago

I don't understand what you mean by "have it persist." You can wrap a ng-if or ng-show around the <div ng-include..> if you want the nav bar to show up conditionally.

Foo L Over a year ago

I think I understand what you mean.. The nav bar needs to be included in each partial in this pattern. That's why I commented that I'm open to a more elegant solution that's as simple..

Collectives™ on Stack Overflow

Dynamic links in Twitter Bootstrap navbar in angularjs

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related