anglejsを持つブートストラップnavbar

anglejsで動作するブートストラップnavbarを取得しようとしています。私は、navbarをindex.htmlに、残りのコンテンツをNavbarの各タブにそれぞれの部分的な部分で入れたいと思っています。私は部分的な部分を表示するのに問題があります。anglejsを持つブートストラップnavbar

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

出典

2013-07-28 lostintranslation

あなたのコードの問題がいくつかあります。私の修正をあなたのバージョンと比較してください。（Plnkr）

ルーティングルールを登録するには、config（）を使用する必要があります。
htmlページにng-viewを入れて、範囲内にあることを確認してください。NavCtrl
ルーティングルールのコントローラ名は文字列でなければなりません。あなたは引用符を逃した。
hrefではなくページをロードするには、ng-clickを使用する必要があります。ルーティングはAngularjsのスコープでhtmlではないことに注意してください。

出典

2013-07-28 18:09:34 zsong

+1洞察力のある "覚えておくと、ルーティングはAngularjsの範囲ではなくhtmlです。" –

片道はありますか？ $ routeProviderでどうすればいいですか？ – oshliaer

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

- 私はポストは少し古いですが、あってもよい知っているhttp://mgcrea.github.io/angular-strap/#/navbar

出典

2013-07-28 19:08:16

長期的にはこれは素晴らしいことです。私はまだ角度を学んでいるので、自分自身で何かをやっているので、フレームワークが私にとって重要だと理解しています。 – 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>

私はそれが助けてくれることを願っています。

出典

2015-03-03 21:16:48

anglejsを持つブートストラップnavbar

答えて

関連する問題