<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.20" data-semver="1.2.20" src="https://code.angularjs.org/1.2.20/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<header-navigation class="navigation" ng-contoller="NavigationCtrl">
<div class="menu-wrapper">
<a href="javascript:void(0)" class="logo logo-starrag-group"></a>
<p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
<div class="navigation-tools">
<ul id="navigation-menu">
<li class="nav-link" ng-if="slot2">
<span class="button-dropdown" data-buttons="dropdown" >
<a class="bbutton button-rounded button-flat-primary {{ $root.trans }}"> {{ "_SELECT_MACHINE" }} <span class=" arrow ion-chevron-right"></span></a>
<ul class="button-dropdown-menu-below" style="display: none;">
<li ng-repeat="item in slot2"><a class="{{ $root.trans }}" ng-href="item.url">{{ slot2.label }} <span class=" arrow ion-chevron-right"></span></a></li>
</ul>
<div style="position: fixed; top: -30px; left: 0px; right: 0px; bottom: 0px; z-index: 999; display: none;"></div>
</span>
</li>
</ul>
</div>
</div>
</header-navigation>
<div ng-controller="MachineDetailCtrl"></div>
<h1>Hello Plunker!</h1>
</body>
</html>
// Code goes here
var app = angular.module('app', [])
.controller('NavigationCtrl', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.slot2 = null;
/**
* Here you can set data to slot2 select box
* @event $rootScope.$broadcast('header-navigation-slot2',[data]);
*/
$scope.$on('header-navigation-slot-machine', function(event, data) {
console.log('header-navigation-slot2', data);
//alert('yoyoy');
$scope.slot2 = data;
});
}
])
.directive('headerNavigation', function() {
return {
restrict: 'E',
transclude: true,
scope: {menu:'@'},
templateUrl: 'header_navigation.html',
link:function(scope,element,attrs){
scope.$watch('menu',function(){
});
scope.$on('header-navigation-slot-machine', function(event, data) {
console.log('header-navigation-slot2', data);
//alert('yoyoy');
scope.slot2 = data;
});
}
};
})
.controller('MachineDetailCtrl', ['$rootScope', '$scope',
function($rootScope, $scope) {
var testItems = [{
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-6",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-7",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-8",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-9",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-10",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-25",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-26",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-27",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-28",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-29",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-30",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-31",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-32",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-33",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-34",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-35",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-36",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-37",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-38",
"active": false
}, {
"url": "#machine-detail/6,7,8,9,10,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39/Machine-39",
"active": false
}];
$scope.machineMenu = [];
$scope.setMachineMenu = function() {
angular.forEach(testItems, function(item) {
$scope.machineMenu.push(item);
});
$rootScope.$broadcast('header-navigation-slot-machine', $scope.machineMenu);
}
$scope.setMachineMenu();
}
]);
/* Styles go here */