ngView中ngRepeat中指令的動態templateUrl

Question

我遇到了AngularJS的問題。 我的應用程序啟動，然后通過ngRoute到達特定的ngView並調用控制器。 控制器初始化時，它將檢索我的API上的數據。 這個ngView的導航系統帶有使用material.angularjs.org/指令的標簽。 選項卡處於活動狀態時，它將列出以前收集的數據所代表的項目。 每個項目都是一個稱為“ tile”的自定義指令，其模板由tile的類型確定。 這就是它停止的地方，因為模板的url由“ tile”的類型確定。 或在明顯編譯該指令之前調用了Directive（因此也稱為templateURL）方法，突然該變量不可用。

一個例子通常勝於語言

這是顯示我的示例的jsfiddle：

http://jsfiddle.net/e8zy2k4j/

html

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

```

javascript

app.directive("jlTile",
    ["CurrentUser", "$compile",
    function(CurrentUser, $compile){
      return {
        restrict: "A",
        templateUrl: function(element, attrs){
            console.log(attrs); // attrs show "{{myVar}}" instead of "feeder"
          return "/templates/elements/tile-feeder.html"; //should return this
          // return "/templates/tile-" + attrs.jlTile + ".html";
        },
        link: function(scope, element, attrs){
          console.log(scope)
        }
      };

```我收到404錯誤/template/tile-{{myVar}}.html找不到

這個myVar計算得太晚了...

有人可以幫幫我嗎 ？ 謝謝 ！

Answer 1

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