Navbar de inicialização com angularjsunit synonyms for matching user input

Estou a tentar arranjar um navbar bootstrap a trabalhar com angularjs. Gostaria de ter o navbar no índice.html e o resto do conteúdo para cada página na barra de navegação em sua própria parcial respectiva. Estou a ter dificuldade em fazer com que as parciais apareçam.

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

Author: Paolo, 2013-07-28
Source

3 answers

Há dois números do teu código. Por favor, compare a minha correção com a sua versão. ([4]}Plnkr)
  1. deve usar a configuração () para registar as regras de encaminhamento.
  2. você precisa colocar ng-view na página html e certifique-se que ela está dentro do escopo de NavCtrl
  3. o nome do controlador nas regras de roteamento deve ser uma string. Falhaste as citações.
  4. deve usar o ng-click para activar para carregar a página em vez de href. Tenha em mente, a rota está em Angularjs's scope not html.
 11
Author: zsong, 2013-07-28 18:09:34

Eu recomendo estritamente que você mude de bootstrap puro para AngularJS compatível bootstrap.

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

 6
Author: Stepan Suvorov, 2013-07-28 19:08:16
Sei que o post é um pouco velho, mas pode ajudar outra pessoa. menu da barra de navegação

É um navbar com um par de menu de lista implementado em AngularJS, Boostrap CSS e angular-ui. O menu Drop down é criado pela chamada recursiva numa directiva personalizada.

O índice.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>

O guião.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);
        });

      }
    }
  };
});

E finalmente os dois modelos:

<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>
Espero que ajude.
 1
Author: felix at housecat, 2015-03-03 21:16:48