Bootstrap navbar with angularjs

Bootstrap navbar with angularjs

There are couple of issues of you code. Please compare my fix with your version. (Plnkr)

  1. You should use config() to register the routing rules.
  2. You need put ng-view in the html page and make sure it is inside the scope of NavCtrl
  3. The controller name in the routing rules should be a string. You missed the quotes.
  4. 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.

Leave a Reply

Your email address will not be published.