AngularJS Dynamc templates

AngularJS Dynamc templates

本文关键字：templates Dynamc AngularJS      更新时间：2023-09-26

另一个angularJS问题！我仍在努力学习指令，我正在考虑的一件事是根据传入的范围项显示不同的模板

link:

和

controller:

并且已经看到评论表明这不能/不应该使用来完成

templateURL :

我有点困惑，因为这是我实现目标的方式。

我有两个模板：-

<div>here is my name :- {{name}}, and im template 1</div>
<div>here is my name :- {{name}}, and im template 2</div>

这是指令

   .directive('createDirective', function () {
      return {
          scope: {name:'&myName'},
          restrict: 'E',
          templateUrl: function (tElement, tAttrs) {
              switch (tAttrs.template)
              {
                  case '1': 
                      return 'app/event/showname.html'
                      break;
                  case '2' :
                      return 'app/event/showname2.html'
                      break;
              }
              console.log('template')
          },
       }
  });

以及HTML 中的指令

<create-directive my-name="bob" template="1"></create-directive>

这似乎奏效了，而且是一个简单得多的解决方案。。但是，我为什么不应该使用这种方法呢？

说不应该使用它作为templateUrl函数是不正确的——提供它是有原因的。

对于您展示的有限示例，它运行良好。

但是，你的例子并没有说明你想要什么，即：

"…基于传递到"中的范围项显示不同的模板

执行template="1"时，您没有传递范围变量。如果您要传递一个范围变量，它看起来像这样：

<create-directive my-name="bob" template="{{templateNum}}">

其中templateNum是作用域上的变量集，它可以等于"1"。在这种情况下，templateURL函数方法将不起作用，因为{{templateNum}}表达式尚未进行插值。因此，tAttrs.template实际上等于字符串"{{templateNum}}"，而不是值"1"

相关文章：