Solution can be found here https://www.npmjs.com/package/ui-navbar
Le dimanche 6 décembre 2015 22:26:54 UTC+1, Alexandre TELLIER a écrit : > > Hello, > I am a newbie in Angurar and I try to mix angular with bootstrap navbar. > The navbar is correcly displayed but when the with is small, the toggle > button don't display the options. > This is my HTML code : > <!DOCTYPE html > > <html lang="fr" xmlns="http://www.w3.org/1999/xhtml"; ng-app="myapp"> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> > <meta name="viewport" content="width=device-width, initial-scale=1"> > <title>VitraGranit</title> > <!-- <link rel="shortcut icon" href="images/favicon.png"> --> > <meta name="description" content=""> > <meta name="keywords" content=""> > <!-- CSS (load bootstrap) --> > <link rel="stylesheet" href="// > netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> > <style> > .navbar { border-radius:0; } > </style> > <!-- Angular --> > <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.js > "></script> > <!-- UI-Router --> > <script src="//angular-ui.github.io/ui-router/release/angular-ui-router.js > "></script> > <!-- App Script --> > <script src="myapp.js"></script> > </head> > > <body ng-app="myapp"> > <nav ng-controller="HeaderCtrl" class="navbar navbar-inverse > navbar-fixed-top"> > <div class="container"> > <div class="navbar-header"> > <button type="button" class="navbar-toggle collapsed" > ng-click="navbarCollapsed = !navbarCollapsed" data-toggle="collapse" > data-target="#navbar" aria-expanded="false" aria-controls="navbar"> > <span class="sr-only">Toggle navigation</span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > <span class="icon-bar"></span> > </button> > <a class="navbar-brand" ui-sref="route1">Project > Title</a> > </div> > <div id="navbar" class="collapse navbar-collapse"> > <ul class="nav navbar-nav"> > <li ng-class="{ active: isActive('/route1') }"><a > ui-sref="route1">route1</a></li> > <li ng-class="{ active: isActive('/route2') }"><a > ui-sref="route2">route2</a></li> > </ul> > </div> > </div> > </nav> > <!-- MAIN CONTENT --> > <div class="container"> > <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT > ============================== --> > <div ui-view></div> > </div> > > > > </body> > </html> > > Then my js : > var myapp = angular.module('myapp', ["ui.router"]) > > myapp.controller("HeaderCtrl", function($scope, $location) { > $scope.navbarCollapsed = true; > $scope.activeLink = function(n) { > return ($state.is(n) ? "active" : ""); > } > }); > > myapp.config(function($stateProvider, $urlRouterProvider){ > // For any unmatched url, send to /route1 > $urlRouterProvider.otherwise("/route1") > > $stateProvider > .state('route1', { > url: "/route1", > templateUrl: "route1.html" > }) > .state('route1.list', { > url: "/list", > templateUrl: "route1.list.html", > controller: function($scope){ > $scope.items = ["A", "List", "Of", "Items"]; > } > }) > > .state('route2', { > url: "/route2", > templateUrl: "route2.html" > }) > .state('route2.list', { > url: "/list", > templateUrl: "route2.list.html", > controller: function($scope){ > $scope.things = ["A", "Set", "Of", "Things"]; > } > }) > }) > > And the partial HTML : > <div class="jumbotron text-center"> > <h1>Route 1</h1> > <hr/> > <a ui-sref=".list">Show List</a> > <div ui-view></div> > </div> > > > The solution should be near yet I cannot solve my problem. > Thanks for any help. > -- You received this message because you are subscribed to the Google Groups "AngularJS" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/angular. For more options, visit https://groups.google.com/d/optout.
