In my quest to develop a versatile left-hand menu component that can dynamically display different menu structures based on input strings, I stumbled upon an interesting challenge. By binding a string to the <left-hand-menu-component> element like so:
<left-hand-menu-component module='abc'></left-hand-menu-component>
I aim to have the menu component adjust its structure to reflect the 'abc' module specifically. This requires the controller of the component to efficiently handle the bound data and make relevant service calls.
After extensive research online, I came across helpful resources such as this article, along with this post and discussions on Stackoverflow. The Angular documentation examples, however, felt too simplistic for this specific scenario.
I've attempted to incorporate the provided code samples into my project, but encountered difficulties in getting the controller to successfully interact with the bound value. Is it feasible within a component structure or would it be more suited for a directive implementation?
Has anyone come across a practical demonstration or informative blog post addressing similar components? Any guidance or insights would be greatly appreciated.
Notably, the console logs within the controller constructor currently output 'undefined' as the result.
Component:
module qa.gonogo {
"use strict";
export class LeftHandMenuComponent implements ng.IComponentOptions {
public transclude: boolean = false;
public controller: Function = LeftHandMenuComponentController;
public controllerAs: string = "vm";
public templateUrl: string = "app/content/lefthandmenu/leftHandMenuComponentTemplate.html";
public bindings: any;
constructor() {
this.bindings = {
module: '<'
}
}
}
angular
.module("goNoGo")
.component("gonogoLefthandmenuComponent", new LeftHandMenuComponent());
}
Controller:
export class LeftHandMenuComponentController implements ILeftHandMenuComponentController {
menuStructure: IMenuStructure[];
closeOthers: boolean = true;
static $inject = [];
constructor(public module: string) {
console.log('binding', module);
console.log('binding2', this.module);
}
public $onInit = (): void => {
this.populateMenuStructure();
}
Route.
$stateProvider
.state("bfts",
<ng.ui.IState>{
url: "/bfts",
views: <any>{
"leftHandMenu": <ng.ui.IState>{
template: "<gonogo-lefthandmenu-component module='bfts'></gonogo-lefthandmenu-component>"
},
"content": <ng.ui.IState>{
template: "bfts content"
}
}
});