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

Question

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

弹出窗口作品：

 <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 属性值 [=24] 的键=].这是 the scource of the 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"}}'。这就是你的第二个例子不起作用的原因。