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

Question

如果我将硬模板ID设置为id =“ popover00.html”，则popover起作用，但是当从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内容插入到id属性值等于key的 $templateCache 中 。 下面是该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"}}' 。 这就是第二个示例不起作用的原因。