Currently, I am in the process of following a tutorial on implementing a drop down menu using AngularJS's sidenav. However, due to using components in my application, my layout is different from the provided example.
I have encountered an issue where the functions are not working properly after populating the ul with names stored in an object. Upon investigation, I have discovered that the error stems from the inability to locate the parent element's controller directive.
var controller = $element.parent().controller();
Upon logging the 'controller' in the console, it should display various controller functions:
vm.isOpen = isOpen;
vm.toggleOpen = toggleOpen;
vm.autoFocusContent = false;
vm.menu = mainNavService;
vm.status = {
isFirstOpen: true,
isFirstDisabled: false
};
However, it currently returns an empty object. Could this be because rather than utilizing a controller, I am employing Angular's component method within the module and utilizing the controller property?
Inquiry:
Why does attempting to access the controller result in no properties being returned?
app.component('mainnav', {
templateUrl: 'p3sweb/app/components/app/views/main-nav.htm',
controller: ['userService', 'mainNavService', function(userService, mainNavService){
var vm = this;
vm.isOpen = isOpen;
vm.toggleOpen = toggleOpen;
vm.autoFocusContent = false;
vm.menu = mainNavService;
vm.status = {
isFirstOpen: true,
isFirstDisabled: false
};
function isOpen(section) {
console.log('menu.isSectionSelected(section)')
return menu.isSectionSelected(section);
}
function toggleOpen(section) {
console.log(menu.toggleSelectSection(section))
menu.toggleSelectSection(section);
}
}]
})
app.directive('menuToggle', [ '$timeout', function($timeout){
return {
scope: {
section: '='
},
templateUrl: 'p3sweb/app/components/app/views/main-nav-li.htm',
link: function($scope, $element) {
var controller = $element.parent().controller(); //FAILS
$scope.isOpen = function() {
return controller.isOpen($scope.section)
};
$scope.toggle = function() {
console.log(controller.toggleOpen())
controller.toggleOpen($scope.section);
};
}
};
}])