CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeatangular-ui
Nithish Reddy J
Nithish Reddy J

Reputation: 155

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>

Upvotes: 2

Views: 2707

Answers (1)

miensol
miensol

Reputation: 41668

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.

Upvotes: 6

Related Questions