javascript - 使用 angular-ui-bootstrap 动态创建 ng-templates 以显示 popover 内容

Question

如果我将模板 ID 硬编码为 id="popover00.html"，则弹出框会起作用但是当从 ng-repeat 生成相同的 id 时它不起作用。它正在服务器上寻找文件。

Popover 作品:

 <div  ng-repeat="(keyT, T) in Tdata track by $index"> 

   <div ng-repeat="(keyS,S) in Sdata track by $index" popover-trigger="mouseenter" uib-popover-template={{"'popover"+keyT+keyS+".html'"}} >
    <script type="text/ng-template" id="popover00.html">
      <div>
        This is an HTML <b>template</b><br>

      </div>
    </script>
   </div> 
 </div>

弹出框不工作:

 <div  ng-repeat="(keyT, T) in Tdata track by $index"> 

   <div ng-repeat="(keyS,S) in Sdata track by $index" popover-trigger="mouseenter" uib-popover-template={{"'popover"+keyT+keyS+".html'"}} >
    <script type="text/ng-template" id={{"popover"+keyT+keyS+".html"}}>
      <div>
        This is an HTML <b>template</b><br>

      </div>
    </script>
   </div> 
 </div>

Answer 1

<script type="text/ng-template" id="templateUrl.html"></script>提供一种声明方式将预加载的 html 内容插入到 $templateCache 中键等于id属性值。这是 the scource的 script 指令:

var scriptDirective = ['$templateCache', function($templateCache) {
  return {
    restrict: 'E',
    terminal: true,
    compile: function(element, attr) {
      if (attr.type == 'text/ng-template') {
        var templateUrl = attr.id,
            text = element[0].text;

        $templateCache.put(templateUrl, text);
      }
    }
  };
}];

正如您在 attr.id 上方看到的那样值在编译 时使用。在您的第二个示例中，此值将等于字符串文字 '{{"popover"+keyT+keyS+".html"}}' .这就是你的第二个例子不起作用的原因。