你可以在飞行中改变templateUrl？ [英] Can you change templateUrl on the fly?

问题描述

是否有可能在该指令的范围将值传递改变templateUrl飞？
我想数据传递到控制器，该控制器将呈现基于从指令

传递的数据的页

东西也许这看起来像：

 ＆LT; D​​IV＆GT;
   ＆LT;景气数据={{myData的}}/＆GT;
＆LT; / DIV＆GT;.directive（潮，功能{
        返回{
            限制：'E'，
            transclude：真实，
            适用范围：'隔离'，
            当地人：{数据：'绑定'}，
            templateUrl：MyTemplate的（{{热潮}}}）//＆LT;  - 这当然是行不通的。
        }
    }）;
 

解决方案

这是可能的，但将要装载的模板依赖于某些范围数据不能使用该指令的 templateUrl 属性了，你将不得不使用较低级别的API，即 $ HTTP 和 $编译。

大约需要（在链接功能只可能）做的是用检索模板的内容 $ HTTP （不要忘了包括 $ templateCache ！），然后编译模板的内容手动。

这听起来像是一个大量的工作，但实际上相当简单。我建议有一个看 ngInclude 指令的来源中在使用这种模式。

下面是这样一个指令的骨架：

  app.directive（'咚'，函数（$ HTTP，$ templateCache，$编译，$解析）{
        返回{
            限制：'E'，
            链接：功能（范围，iElement，iAttrs）{
              VAR热潮= $解析（iAttrs.data）（范围）;
              $ http.get（'MyTemplate的'+热潮，{缓存：$ templateCache}）。成功（功能（tplContent）{
                iElement.replaceWith（$编译（tplContent）（范围））;
              }）;
            }
        }
    }）;
 

假设它会被用来作为＆LT;景气数据='名字'＆GT;＆LT; /热潮​​＆GT; 。工作普拉克这里：<一href=\"http://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=$p$pview\">http://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=$p$pview

请注意，我从 {{名称}} 来解析属性可能起一个模板应该只确定后，在开始。

Is it possible to change templateUrl on the fly by passing values in the directive's scope? I want to pass data to controller that will render the page based on the data that passed from the directive

something maybe that looks like that:

<div> 
   <boom data="{{myData}}" />
</div> 

.directive('boom', function {
        return {
            restrict: 'E',
            transclude: true,
            scope: 'isolate',
            locals: { data: 'bind' },
            templateUrl: "myTemplate({{boom}}})" // <- that of course won't work.
        }
    });

解决方案

It is possible, but when your template to be loaded depends on some scope-data you can't use the directive's templateUrl property anymore and you will be obliged to use lower-level API, namely $http and $compile.

Roughly what you need to do (only possible in the linking function) is to retrieve template's content using $http (don't forget to involve $templateCache!) and then compile template's content "manually".

It might sound like it is a lot of work but in practice it is rather straightforward. I would suggest having a look at the ngInclude directive sources where this pattern is used.

Here is a skeleton of such a directive:

app.directive('boom', function($http, $templateCache, $compile, $parse) {
        return {
            restrict: 'E',
            link: function(scope , iElement, iAttrs) {                            
              var boom = $parse(iAttrs.data)(scope);
              $http.get('myTemplate'+boom, {cache: $templateCache}).success(function(tplContent){
                iElement.replaceWith($compile(tplContent)(scope));                
              });              
            } 
        }
    });

assuming that it would be used as <boom data='name'></boom>. Working plunk here: http://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?p=preview

Please note that I've changed attributes evaluation from {{name}} to attributes parsing since probably a template should be determined only once, at the beginning.

这篇关于你可以在飞行中改变templateUrl？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！