在运行时更改 angularjs 嵌套模板 [英] change an angularjs nested template at run time

问题描述

我有一个模板，它嵌套在另一个模板中，我想在单击按钮时加载该模板.所以嵌套模板是动态加载的.这就是我迄今为止所做的.

这是主体.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 when the 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 嵌套模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！