Question

我正在尝试使用angularjs启动引导导航栏。我想在index.html中使用导航栏，并在导航栏中的每个选项卡中包含其各自部分内容的其余内容。我无法让部分人出现。

http://plnkr.co/edit/sKJU4nrNYV56uJQG4Lvw?p=preview

Answer 1

您的代码有几个问题。请将我的修复与您的版本进行比较。（Plnkr）

您应该使用config（）来注册路由规则。
您需要在html页面中放置ng-view，并确保它在NavCtrl
路由规则中的控制器名称应为字符串。你错过了报价。
您应该使用ng-click触发加载页面而不是href。请记住，路由在Angularjs的范围内而不是html。

Answer 2

我严格建议您从纯引导切换到 AngularJS兼容引导程序。

例如 - http://mgcrea.github.io/angular-strap/#/navbar

Answer 3

我知道帖子有点旧，但可能可以帮助别人 navbar menu

这是一个导航栏，在AngularJS，Boostrap CSS和angular-ui中实现了几个下拉菜单。下拉菜单是通过自定义指令中的递归调用创建的。

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>

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

      }
    }
  };
});

最后是两个模板：

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

我希望它有所帮助。

带有angularjs的Bootstrap导航栏

3 个答案: