在运行时更改的angularjs嵌套模板(change an angularjs nested te

我有嵌套，我希望当我点击一个按钮加载另一个模板中的模板。所以嵌套模板是动态加载。这是我迄今所做的。

这是主要的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"
        }
    }
})

自叹不如，当我用点号也没有工作，所以我必须使用绝对命名方法。我还注意到，当我添加了嵌套视图，如图以上的时间花费之前模板被加载需要很长的时间。

请我希望得到任何帮助，可以让我加载在运行时嵌套视图（可能非常快）

我不知道，你可以使用UIView的动态加载HTML。我想尝试另一种可能的解决方案：