2

I am trying to implement a page that contains a navbar (http://getbootstrap.com/components/ see navbar), and the content of the page is inserted from a partial html via ngView. However when the dropdown is clicked, the entire ngView portion disappears.

This is how I defined the ngView:

<div ng-controller="MainCtrl">
    <div ng-view></div>
</div>

Here is a plunker: http://plnkr.co/edit/l8GVWUiq2HRL3lXhu9xd?p=preview (Please open by clicking "Launch preview in separate window" to see the navbar) Click the navbar button "Dropdown".

If I debug the screen I can see that the ngView is not rendered at all, all I see is this:

<!-- ngView:  -->

Any ideas?

Jason D
  • 8,023
  • 10
  • 33
  • 39
aol
  • 357
  • 5
  • 15

2 Answers2

3

You should add this to the ul tag:

ng-click="$event.preventDefault();"
quanfoo
  • 365
  • 2
  • 9
  • Follow up on this: although the navbar menu click now works, the menu item click does not do any routing. See updated plunkr: http://plnkr.co/edit/l8GVWUiq2HRL3lXhu9xd?p=preview – aol Aug 20 '15 at 07:14
  • Basically, you don't want to forbid routing for all links, so just use $preventDefault properly. I added another view for the action route at [here](http://plnkr.co/edit/WMLjaNDNq0KKoX4ZRmNK?p=preview) Here are some resources that could be useful for you: [official doc](https://docs.angularjs.org/api/ngRoute/service/$route), [phonecat example](https://github.com/angular/angular-phonecat/blob/master/app/js/app.js) – quanfoo Aug 20 '15 at 10:23
  • I see - I took your advice literally and put it into – aol Aug 20 '15 at 11:47
  • It's such a bad practice to add $preventDefault for each li (this's just a quick fix) Instead, You can handle views by using router properly :) – quanfoo Aug 20 '15 at 12:25
  • im not making a navbar or anything. But I also have ng-view div compiling into and can't find any documentation on that. Did you ever get that answer? – Kyle Calica-St Apr 10 '16 at 10:22
  • 1
    That comment should be generated by the framework. If your routes didn't work as expected, see if $routeProvider was configured properly. This may help: https://docs.angularjs.org/api/ngRoute/directive/ngView – quanfoo Apr 11 '16 at 08:36
  • yup! You were correct, only shows when there is no view to load. Found out that once again I forgot the () at the end of my self invoking function. – Kyle Calica-St Apr 11 '16 at 21:35
2

Just remove the href="#" attribute from your <a> element in the dropdown link button and it will stop interfering in your routing.

<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
Gabriel Marcos Jarczun
  • 219
  • 1
  • 10
  • This works perfectly on html5 https://stackoverflow.com/questions/5292343/is-an-anchor-tag-without-the-href-attribute-safe. – Brian Nov 18 '16 at 20:17