使用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"}}' 。 這就是第二個示例不起作用的原因。