在运行时间更改 angularjs 嵌套模板

Question

我有一个模板嵌套在另一个模板中，我想在单击按钮时加载该模板。所以嵌套模板是动态加载的。这是我到目前为止所做的。

这是主要的 body.html（当浏览器中提供 url 时加载，例如 http://url#/newtemplate）

<div ui-view> </div>

为简洁起见，已删除代码的其他部分

这是我希望在单击按钮时显示的 new_template.html。

当我像下面这样直接输入模板名称时，即当我硬编码时

<div ui-view="number1"></div>

它完全加载了模板。

这是动态模型

<button ng-model="template_name" ng-value="number1">Button1</button>
<div ui-view="{{template_name}}"></div>
{{template_name}}

上面没有按我的预期加载模板。但它显示字符串 number1 时按钮被点击

我该怎么做才能加载模板....

这是我的控制器

.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"
        }
    }
})

奇怪的是，当我使用点符号时它不起作用，所以我必须使用绝对命名方法。我还注意到，当我添加如上所示的嵌套视图时，加载模板所需的时间需要很长时间。

如果有任何帮助可以让我在运行时加载嵌套视图（可能非常快），我将不胜感激

期待更多答案

我还是希望可以使用ui-view/ui-router因为可以使用controller

Answer 1

我不确定您是否可以使用 uiView 动态加载 html。我会尝试其他可能的解决方案：

使用指令
使用 ngInclude

我会给你一个 ngInclude 的例子：https://next.plnkr.co/edit/M5hl71mXdAGth2TE?open=lib%2Fscript.js&deferRun=1&preview

在运行时间更改 angularjs 嵌套模板

change an angularjs nested template at run time

javascript

angularjs

angular-ui-router

在 运行 时间更改 angularjs 嵌套模板

change an angularjs nested template at run time

javascript

angularjs

angular-ui-router

在运行时间更改 angularjs 嵌套模板