9

我正在尝试让一个引导导航栏与 angularjs 一起使用。我想在 index.html 中有导航栏，而导航栏中每个选项卡的其余内容都在其各自的部分中。我无法让部分显示。

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

4

3 回答 3

11

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

  1. 您应该使用 config() 来注册路由规则。
  2. 您需要放入ng-viewhtml 页面并确保它在NavCtrl
  3. 路由规则中的控制器名称应该是一个字符串。你错过了报价。
  4. 您应该使用 ng-click 触发加载页面而不是 href。请记住，路由在 Angularjs 的范围内，而不是 html。
于 2013-07-28T18:09:34.347 回答
6

我强烈建议您从纯引导程序切换到与AngularJS 兼容的引导程序。

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

于 2013-07-28T19:08:16.927 回答
1

我知道帖子有点旧，但可能可以帮助其他人 导航栏菜单

它是一个导航栏，带有几个在 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>

脚本.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>

我希望它有所帮助。

于 2015-03-03T21:16:48.917 回答