Bootstrap navbar avec angularjs

Je suis en train d'essayer d'obtenir un bootstrap barre de navigation de travail avec angularjs. Je voudrais avoir la barre de navigation dans le index.html et le reste du contenu de chaque onglet dans la barre de navigation en son propre partielle. J'ai de la difficulté à obtenir les partiels.

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

OriginalL'auteur lostintranslation | 2013-07-28

  1. 11

    Il y a quelques problèmes de code. Veuillez comparer ma dose avec votre version. (Plnkr)

    1. Vous devez utiliser config() pour enregistrer les règles de routage.
    2. Vous avez besoin de mettre ng-view dans le code html de la page et assurez-vous qu'il est à l'intérieur de la portée de NavCtrl
    3. Le nom du contrôleur dans les règles de routage doit être une chaîne. Vous avez manqué les guillemets.
    4. Vous devez utiliser ng-cliquez sur la gâchette pour charger la page plutôt que de href. Gardez à l'esprit, le routage est dans Angularjs est portée non pas en html.
    +1 pour le perspicace "Gardez à l'esprit, le routage est dans Angularjs est portée non pas en html."
    Est-il un moyen? Comment puis-je le faire par $routeProvider?

    OriginalL'auteur zs2020

  2. 6

    J'ai strictement vous recommandons de passer de pure bootstrap pour AngularJS compatible bootstrap.

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

    Convenu long terme, cela ressemble à une grande chose à utiliser. Je suis toujours en apprentissage angulaire, donc en faisant des choses sur mon propre premier si je comprends bien, le cadre est important pour moi.
    Dans ce cas, ne pas utiliser bootstrap. Bootstrap et Angulaire ne sera pas toujours jouer gentil si vous utilisez la version régulière, et la plupart des choses de bootstrap peut faire peut-être déjà fait dans Angulaire. Cela ne veut pas dire qu'on ne devrait jamais utiliser Bootrap Angulaire, bien sûr, mais si vous apprenez que vous devez apprendre à faire les choses à l'angle de voie avant de vous présenter Bootstrap.
    Bon point. Je suis tombé sur cette lorsque recherche de mon propre solution mais je voulais utiliser les angular-ui-router. FWIW, j'ai créé une directive de base qui utilise angular-ui-router et pas grand chose d'autre à vous donner le contrôle sur votre bootstrap barre de navigation: cr-bootstrap-barre de navigation

    OriginalL'auteur Stepan Suvorov

  3. 1

    Je sais que le post est un peu vieux, mais peut-être aider quelqu'un d'autre
    barre de navigation de menu

    C'est une barre de navigation avec un couple de menu déroulant mis en œuvre dans AngularJS, Bootstrap CSS et angular-ui. Menu déroulant est créé par l'appel récursif à une coutume de la directive.

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

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

    Et enfin, les deux modèles:

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

    J'espère que cela aide.

    OriginalL'auteur felix at housecat