您可以即时更改templateUrl吗？

Question

是否可以通过在指令范围内传递值来即时更改templateUrl？我想将数据传递到控制器，该控制器将根据从指令传递的数据来呈现页面

可能看起来像这样：

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

Answer 1

有可能，但是当要加载的模板取决于某些范围数据时，您将无法再使用指令的templateUrl属性，并且您将不得不使用较低级别的API，即$http和$compile。

大约需要做的事情（仅在链接功能中是可能的）是使用$http（不要忘了参与$templateCache！）检索模板的内容，然后“手动”编译模板的内容。

听起来可能很多工作，但实际上却很简单。我建议看看使用此模式的ngInclude指令源。

这是该指令的框架：

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));                
              });              
            } 
        }
    });

假设它将用作<boom data='name'></boom>。在这里工作的小伙伴：http
://plnkr.co/edit/TunwvhPPS6MdiJxpNBg8?
p=
preview

请注意，我已将属性评估从更改{{name}}为属性解析，因为一开始模板可能只应确定一次。