Currently, I am attempting to organize my menu using a directive. Here is the structure I have set up:
function Menu(){
self = this;
self.tab = '';
self.selectedTab = function(tab){
self.tab=tab;
console.log('updating tab');
}
}
angular.module('app.menu')
.controller('MenuController',Menu);
Furthermore, I have created a basic directive as follows:
function MenuDirective(){
return {
templateUrl:'Menu.html',
controller:'MenuController',
controllerAs:'menu'
};
}
angular.module('app.menu')
.directive('MenuDirective', MenuDirective)
The app.menu module has been added to my app.js. Within my index file, the directive is called using
<menu-directive></menu-directive>Menu.html displays correctly, clicking on any of the links inside it does not trigger the console log or apply the CSS styles properly.
The HTML code within Menu.html resembles:
<li class='menuTab' ng-class="{'active': menu.tab === '/'}"><a href="#/" class='menuAnchor' ng-click="menu.selectedTab('/')">Home</a></li>When I move the menu back to the index page instead of using a directive, everything functions as expected. Any thoughts or suggestions? The Angular version being utilized is 1.5.X