Currently, I am facing an issue where I have a template nested within another template, and I want to load it dynamically when a specific button is clicked. Here is what I have attempted so far:
This is the main body.html (which loads when a URL is provided in the browser e.g. ):
<div ui-view> </div>
For brevity, I have omitted other sections of the code.
Next, I have a new_template.html file that I expect to display when the button is clicked:
When I directly input the template name like below (hard coding it):
<div ui-view="number1"></div>
The template loads successfully. However, when I attempt to load it dynamically with the following code, it does not load as expected, but instead displays the string "number1" when the button is clicked:
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
How can I modify this to successfully load the template?
Additionally, here is a snippet of my controller:
.state('parent',{
url: '/newtemplate',
views:{
'':{
templateUrl: "parent.tpl",
contoller:"controller",
},
'number1@parent':{
templateUrl:"number1.tpl",
contoller:"formcontroller"
},
'number2@parent':{
templateUrl:"number2.tpl",
contoller:"formcontroller"
},
'number3@parent':{
templateUrl:"number3.tpl",
contoller:"formcontroller"
}
}
})
It seems that using the dot notation did not work for me, so I had to resort to the absolute naming method. I also noticed a significant delay in loading the template when using nested views as specified above. Any suggestions on how to improve the loading speed of nested views at runtime would be greatly appreciated.
I am eagerly awaiting more helpful answers. Thank you.
Expecting more insight and solutions
I still believe that utilizing ui-view/ui-router is essential for leveraging controller functionalities.