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

Dynamically creating ng-templates to show popover content using angular-ui-bootstrap

本文关键字：显示 angular-ui-bootstrap ng 创建 动态      更新时间：2023-09-26

如果我将模板 id 硬编码为 id="popover00.html，则弹出框有效"但是当从ng-repeat生成相同的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>

<script type="text/ng-template" id="templateUrl.html"></script>提供了一种声明性方法，用于将预加载的 html 内容插入 $templateCache 键等于id属性值。这是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"}}'。这就是你的第二个示例不起作用的原因。

相关文章：