anglejsで動作するブートストラップnavbarを取得しようとしています。私は、navbarをindex.htmlに、残りのコンテンツをNavbarの各タブにそれぞれの部分的な部分で入れたいと思っています。私は部分的な部分を表示するのに問題があります。anglejsを持つブートストラップnavbar
http://plnkr.co/edit/sKJU4nrNYV56uJQG4Lvw?p=preview
anglejsで動作するブートストラップnavbarを取得しようとしています。私は、navbarをindex.htmlに、残りのコンテンツをNavbarの各タブにそれぞれの部分的な部分で入れたいと思っています。私は部分的な部分を表示するのに問題があります。anglejsを持つブートストラップnavbar
http://plnkr.co/edit/sKJU4nrNYV56uJQG4Lvw?p=preview
あなたのコードの問題がいくつかあります。私の修正をあなたのバージョンと比較してください。 (Plnkr)
ng-view
を入れて、範囲内にあることを確認してください。NavCtrl
純粋なブートストラップからAngularJS互換ブートストラップに切り替えることを強くお勧めします。例えば
- 私はポストは少し古いですが、あってもよい知っているhttp://mgcrea.github.io/angular-strap/#/navbar
長期的にはこれは素晴らしいことです。私はまだ角度を学んでいるので、自分自身で何かをやっているので、フレームワークが私にとって重要だと理解しています。 – lostintranslation
その場合は、ブートストラップを使用しないでください。ブートストラップと角度は、通常のバージョンを使用するといつも素晴らしいとは言えません。また、ブートストラップのほとんどは既にAngularで行うことができます。ブートラップを使用するべきではないと言っているわけではありませんが、あなたが学びたい場合は、ブートストラップを導入する前に角度を使ってやることを学ぶべきです。 –
良い点。私は自分のソリューションを探すときにこれを見つけましたが、[angular-ui-router](https://github.com/angular-ui/ui-router)を使いたいと思っていました。 FWIW、私はあなたのブートストラップのnavbarを制御するために、それ以外の角度uiルータを使用する基本的な指示を作成しました:[cr-bootstrap-navbar](https://github.com/coderigo/cr-bootstrap-navbar ) – coderigo
が他の誰か navbar menu
それはAngularJS、ブートストラップで実装ドロップダウンメニューのカップルとナビゲーションバーで助けることができますCSSと角度-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>
私はそれが助けてくれることを願っています。
+1洞察力のある "覚えておくと、ルーティングはAngularjsの範囲ではなくhtmlです。" –
片道はありますか? $ routeProviderでどうすればいいですか? – oshliaer