AngularJS stuff I'm just not getting my head around

gistfile1.txt

doctype 5
html(lang="en", ng-app="blaze-control-panel")
  head
    title 'Blaze Control Panel'
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(href="css/bootstrap.css", rel="stylesheet", type="text/css")
    link(href="css/bootstrap-responsive.css", rel="stylesheet", type="text/css")
    link(href="css/app.css", rel="stylesheet", type="text/css")
    script(src='js/lib/jquery-1.8.0.min.js')
    script(src='js/lib/underscore-1.3.3.min.js')
    script(src='js/lib/bootstrap.js')
    script(src='js/lib/angular-1.0.1.min.js')
    script(src='js/controllers.js')
    script(src='js/blaze-control-panel.js')
  body(ng-controller='MainController')
    .navbar.navbar-inverse.navbar-fixed-top
      .navbar-inner
        .container
          a.btn.btn-navbar(data-toggle="collapse", data-target=".nav-collapse")
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.brand(ng-click='setRoute("/home")') Blaze Control Panel
          .nav-collapse.collapse
            p.navbar-text.pull-right
              a.navbar-link(target='_self', href='/auth/google') Sign in with Google
            ul.nav
              li.dropdown.active
                a(data-toggle="dropdown") Ad Sources
                ul.dropdown-menu
                  li.active
                    a(ng-click='setRoute("/scenarios")') Scenarios
              li.dropdown.active
                a(data-toggle="dropdown") Campaigns
                ul.dropdown-menu
                  li.active
                    a(ng-click='setRoute("/orders")') Orders

    .container
      div('ng-view')
        block content

See the line:

a.brand(ng-click='setRoute("/home")') Blaze Control Panel

That ng-click handler pointing to the setRoute() function on my controller does actually work. It does the whole pushState shebang, updating the page and URL in place without hitting the server. Yay :)

However, a link like this:

a.navbar-link(href='/auth/google') Sign in with Google

will do nothing unless I add

target='_self'

Which leaves me confused... why does angular.js intercept click events to the link if it's going to do nothing with it?

Also, I'd like to not even have the setRoute() functions at all if possible.

Comments appreciated :)

Thank,

James.

BTW, the link

a.navbar-link(href='/auth/google') Sign in with Google

actually should go hit the server, so I understand why the target='_self' is needed

Yep, I've had the exact same problem. If you set your a.brand(href='/home'), it should work (you don't need setRoute().

What's happening (I think) with '/auth/google' is the location is getting updated, but the routing table is defaulting to the page you're currently on. So, it looks like nothing is happening. Adding target='_self' here is the way to go.

If I remove the setRoute calls from the scenarios and orders links, they behave like regular links (i.e. they hit the server). Perhaps this is something to do with the way I have configured the locationProvider. It's configured with an empty string for hashPrefix (we can dictate browser choice) and html5Mode set to true.

Wait, so if you have two links: a.brand(href='/home') Blaze Control Panel and a.navbar-link(href='/auth/google') Sign in with Google i.e. no target='_self' on either, one hits the server and the other doesn't?

So a.navbar-link(href='/auth/google') (without the target='_self') is probably Twitter bootstrap weirdness.

Come to think of it, it all might be. I wonder if bootstrap is screwing up Angular's event handling? Seems odd because they seem to like Bootstrap in the Angular videos.

And I can confirm that the problem is Bootstrap.

If I put a link outside of the .navbar div, it works perfectly.