angularjs - 您可以即时更改 templateUrl 吗？

Question

是否可以通过在指令范围内传递值来动态更改 templateUrl？
我想将数据传递给 Controller ​​，该 Controller 将根据从指令传递的数据呈现页面

可能看起来像这样的东西:

<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指令 sources使用此模式的地方。

这是此类指令的骨架:

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}} 更改为到属性解析，因为模板可能只应在开始时确定一次。