<!DOCTYPE html>
<html ng-app="demo">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
<script src="navigationList.js"></script>
<script src="demo.js"></script>
</head>
<body ng-controller="DemoCtrl">
<h3>Demo</h3>
<navigation-list list="list"></navigation-list>
</body>
</html>
// Code goes here
var app = angular.module('demo', ['navigation-list']);
app.controller('DemoCtrl', function($scope) {
$scope.list = [{
heading: 'Module 1',
items: [
{name: 'Page1', url: 'page1.html'},
{name: 'Page2', url: 'page2.html'}
]
},
{
heading: 'Module 2',
items: [
{name: 'Page3', url: 'page3.html'},
]
}];
});
/* Styles go here */
.navigation-list .nav-box {
border: 1px solid lightgray;
overflow: auto;
height: calc(90vh);
}
.navigation-list .content-box {
border: 1px solid lightgray;
margin-left: 20px;
height: calc(90vh);
}
.navigation-list a {
text-decoration: none;
cursor: pointer;
}
.navigation-list a.active {
color: #fff;
pointer-events: none;
}
.navigation-list .active-highlight {
background-color: darkgray;
}
.navigation-list .same-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
<h3>Page1</h3>
<h3>Page2</h3>
<h3>Page3</h3>
var app = angular.module('navigation-list', []);
angular
.module('navigation-list')
.directive('navigationList', function () {
return {
restrict: 'E',
templateUrl: 'navigationList.html',
scope: {
list: '=',
defaultSelction: '='
},
link: function ($scope) {
if (!$scope.list || !$scope.list.length || !$scope.list.length === 0) {
console.error('invalid attribute object');
return;
}
$scope.currentUrl = $scope.defaultSelction? $scope.defaultSelction : $scope.list[0].items[0].url;
$scope.update = function(url) {
$scope.currentUrl = url;
}
}
};
}).run(
['$templateCache', function($templateCache) {
var DEFAULT_TEMPLATE = '<div class="navigation-list"><div class="same-height"><div class="col-md-3 nav-box">' +
'<div ng-repeat="module in list"><div class="heading-bottom-line"><h4>{{module.heading}}</h4></div>' +
'<div ng-repeat="item in module.items"><div ng-class="{\'active-highlight\':item.url === currentUrl}">' +
'<a ng-class="{\'active\':item.url === currentUrl}" ng-click="update(item.url)">{{item.name}}</a></div></div>' +
'</div></div><div class="col-md-9 content-box"><div ng-include="currentUrl" /></div></div></div>';
$templateCache.put('navigationList.html', DEFAULT_TEMPLATE);
}]);