All geek questions in one place

Loading navbar with corner

I am trying to get a bootable navbar working with angularjs. I would like to have a navigation bar in index.html and the rest of the content for each tab in the navigation bar in its own partial part. I'm having problems with partial messages.

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

+6
source share
3 answers

There are a couple of code issues. Please compare my corrections with your version. ( Plnkr )

  • You must use config () to register routing rules.
  • You need to put ng-view on the html page and make sure it is inside the NavCtrl
  • The name of the controller in the routing rules must be a string. You missed the quotes.
  • You should use ng-click to start the page load, not href. Keep in mind that routing is in the scope of Angularjs, not html.
+10
source

I strongly recommend that you switch from a clean bootstrap to a bootable support file .

for example - http://mgcrea.imtqy.com/angular-strap/#/navbar

+6
source

I know the message is a bit outdated, but maybe the navigation menu may help someone else

This is a navigation bar with a couple of drop-down menus implemented in AngularJS, Boostrap CSS, and angular -ui. A drop-down menu is created by a recursive call in the user directive.

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

And finally, two patterns:

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

Hope this helps.

+1
source

Source: https://habr.com/ru/post/950473/

More articles:


All Articles