Skip to content

Instantly share code, notes, and snippets.

@kaiohken1982

kaiohken1982/index.html

Last active August 29, 2015 14:06
Show Gist options
  • Save kaiohken1982/df03ae7f4aa7db6d22fc to your computer and use it in GitHub Desktop.
Save kaiohken1982/df03ae7f4aa7db6d22fc to your computer and use it in GitHub Desktop.
Download ZIP
Dynamic menu hightlight AngularJS directive
Raw
index.html
<!-- this is the main inex.html file of the app -->
</head>
<!-- <body ng-app="angularJsphonegapApp"> manual bootstrap within app.js -->
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<rz-menu></rz-menu>
<div class="container" ng-view=""></div>
<!-- other stuffs here -->
Raw
rzmenu.html
<div class="header">
<ul class="nav nav-pills pull-right">
<li ngClass="{active: isActive('/')}"><a ng-href="#">Home</a></li>
<li ngClass="{active: isActive('/contacts')}"><a ng-href="#/contacts">Contact</a></li>
<li ngClass="{active: isActive('/device')}"><a ng-href="#/device">Device</a></li>
<li ngClass="{active: isActive('/geo')}"><a ng-href="#/geo">Geolocation</a></li>
</ul>
<h3 class="text-muted">AngularJSPhonegap</h3>
</div>
Raw
rzmenu.js
'use strict';
angular.module('angularJsphonegapApp')
.directive('rzMenu', function () {
return {
templateUrl: 'views/directives/rzmenu.html',
restrict: 'E',
scope: {},
controller: function($scope, $location) {
console.log($location.path());
// $scope.getClass = function(path) {
// if ($location.path().substr(0, path.length) == path) {
// return "active"
// } else {
// return ""
// }
// }
}
};
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment