Nithish Reddy J Nithish Reddy J - 1 month ago 13
Javascript Question

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

The popover works if i hardcode template id as id="popover00.html"
But it doesnot work when the same id is generated from ng-repeat.It is looking for file on server.

Popover Works:

<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>


Popover not working:

<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

The <script type="text/ng-template" id="templateUrl.html"></script> provides a declarative way to insert a preloaded html content into $templateCache at key equal to id attribute value. Here is the scource of the script directive:

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);
      }
    }
  };
}];

As you can see above the attr.id value is used at compile time. In your second example this value would be equal to string literal '{{"popover"+keyT+keyS+".html"}}'. That's the reason your second example doesn't work.