9

angularjsで動作するブートストラップナビゲーションバーを取得しようとしています。index.html に navbar を配置し、navbar の各タブの残りのコンテンツをそれぞれのパーシャルに配置したいと考えています。パーシャルを表示するのに問題があります。

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

4

3 に答える 3

11

あなたのコードにはいくつかの問題があります。私の修正をあなたのバージョンと比較してください。(プランクル)

  1. ルーティング ルールを登録するには、config() を使用する必要があります。
  2. HTMLページに入れng-view、それがの範囲内にあることを確認する必要がありますNavCtrl
  3. ルーティング ルールのコントローラ名は文字列である必要があります。あなたは引用符を逃しました。
  4. href ではなく ng-click を使用して、ページをロードするようにトリガーする必要があります。ルーティングは html ではなく Angularjs のスコープ内にあることに注意してください。
于 2013-07-28T18:09:34.347 に答える
6

純粋なブートストラップからAngularJS 互換のブートストラップに切り替えることを強くお勧めします。

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

于 2013-07-28T19:08:16.927 に答える
1

投稿が少し古いことは知っていますが、他の人の navbarメニューを助けることができるかもしれません

これは、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);
        });

      }
    }
  };
});

そして最後に 2 つのテンプレート:

<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 に答える