Question

我正面临AngularJS的问题。我的应用程序启动，然后通过ngRoute到达特定的ngView并调用控制器。当控制器初始化时，它会检索我的API上的数据。这个ngView有一个带有使用material.angularjs.org/指令的标签的导航系统。当选项卡处于活动状态时，它会列出先前收集的数据所表示的项目。每个项目都是一个名为＆＃34; tile＆＃34;其模板由tile的类型决定。这就是它停止的地方，因为模板的网址是由＆＃34; tile＆＃34;的类型决定的。或者在显然编译之前调用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";
    }
  }
});

用于指令的动态templateUrl在ng视图中重复

1 个答案: