Javascript ngView中ngRepeat中指令的动态模板URL

我正面临着AngularJS的问题。 我的应用程序启动，然后通过ngRoute到达特定的ngView并调用控制器。 当控制器初始化时，它在我的API上检索数据。 此ngView有一个导航系统，带有使用material.angularjs.org/指令的选项卡。当选项卡处于活动状态时，它将列出以前收集的数据所表示的项目。 每个项目都是一个名为“tile”的自定义指令，其模板由tile的类型决定。这就是它停止的地方，因为模板的url由“tile”的类型决定。或者在编译之前调用指令（因此也就是templateURL）方法，突然变量不可用

以身作则往往胜于言辞

下面是一个JSFIDLE，显示了我的示例：

```html

<md-list ng-if="data_array.length">
    <md-item ng-repeat="data in data_array" jl-tile="{{myVar}}"></md-item>
</md-list>

``` 我发现404错误/template/tile-{{myVar}}.html未找到

这个myVar计算得太晚了

有人能帮我吗？

---

谢谢

当运行

templateUrl

函数时，属性值仍然不会插值

因此，您需要在

link

时间加载模板。您可以廉价地重复使用

ng include

，以实现以下目标：

.directive("jlTile", function($interpolate){
  return {
    template: '<div ng-include="url"></div>',
    link: function(scope, element, attrs){
      var suffix = $interpolate(attrs.jlTile)(scope);
      scope.url = "/templates/elements/tile-" + suffix + ".html";
    }
  }
});

指令（“jlTile”，函数（$interpolate）{
返回{
模板：“”，
链接：函数（范围、元素、属性）{
变量后缀=$interpolate（attrs.jlTile）（范围）；
scope.url=“/templates/elements/tile-”+后缀+“.html”；
}
}
});

谢谢，它刚刚解决了我的问题！祝您有个美好的一天。

.directive("jlTile", function($interpolate){
  return {
    template: '<div ng-include="url"></div>',
    link: function(scope, element, attrs){
      var suffix = $interpolate(attrs.jlTile)(scope);
      scope.url = "/templates/elements/tile-" + suffix + ".html";
    }
  }
});