问题描述
我有一个模板,它嵌套在另一个模板中,我想在单击按钮时加载该模板.所以嵌套模板是动态加载的.这就是我迄今为止所做的.
这是主体.html(当浏览器中提供一个url时加载,例如http://url#/新模板)
为简洁起见,已删除代码的其他部分
这是我希望在单击按钮时显示的 new_template.html.
当我像下面那样直接输入模板名称时,即当我对其进行硬编码时
它完全加载了模板.
这是动态模型
<button ng-model="template_name" ng-value="number1">Button1</button><div ui-view="{{template_name}}"></div>{{template_name}}
以上没有像我预期的那样加载模板.但它显示字符串 number1 时按钮被点击
我该怎么做才能加载模板....
这是我的控制器
.state('父',{网址:'/新模板',意见:{'':{templateUrl: "parent.tpl",控制器:控制器",},'number1@parent':{templateUrl:"number1.tpl",控制器:表单控制器"},'number2@parent':{templateUrl:"number2.tpl",控制器:表单控制器"},'number3@parent':{templateUrl:"number3.tpl",控制器:表单控制器"}}})
很奇怪,当我使用点表示法时它不起作用,所以我必须使用绝对命名方法.我还注意到,当我添加如上所示的嵌套视图时,加载模板需要很长时间.
请让我在运行时加载嵌套视图的任何帮助(可能非常快)
期待更多答案
我还是希望我可以使用 ui-view/ui-router 因为可以使用控制器.
我不确定您是否可以使用 uiView 动态加载 html.我会尝试另一种可能的解决方案:
- 使用指令
- 使用 ngInclude
我会给你一个 ngInclude 的例子:https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview
I have a template which is nested inside another template which I want to load when i click on a button.So the nested template is loaded dynamically. This is what I have done so far.
This is the main body.html (this loads when a url is provided in the browser e.g. http://url#/newtemplate)
<div ui-view> </div>
Other section of the code has been removed for brevity
This is the new_template.html which I expects it to show when I click a button.
When I put a template name directly like below i.e. when I hard code it
<div ui-view="number1"></div>
It loads the template fully.
This is the dynamic model
<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}
The above does not load the template as I expected. but it shows the string number1 whenthe button is clicked
What can I do for it to load the template....
This is 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"
}
}
})
Strange enough when I used the dot notation it did not work so I have to use the absolute naming method.I also noticed that when I added the nested views as shown above the time it takes before the template gets loaded take a very long time.
Please I would appreciate any help which can allow me to load a nested view at runtime (possibly very fast)
Expecting more answer
I still hope that the I can make use of ui-view/ui-router because of the ability to make use of controller.
I'm not sure you can use uiView to load html dynamically.I would try another possible solutions:
- Use directives
- Using ngInclude
I'll leave you an example with ngInclude: https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview
这篇关于在运行时更改 angularjs 嵌套模板的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!