Nick Nick - 1 year ago 1256
AngularJS Question

Angular UI Bootstrap: Dynamic popover template ID

Is it possible to use template with dynamic ID for Angular UI Popover?

For example:

<div ng-repeat="row in data">
<button class="btn" uib-popover-template="'myTemplate_{{}}.html'" popover-trigger="mouseenter">View</button>
<script type="text/ng-template" id="myTemplate_{{}}.html">
<strong>Name</strong>: {{}}<br/>
<strong>Phone</strong>: {{}}<br/>
<strong>Email</strong>: {{}}

When I mouseover the button Angular tries to fetch the template (eg myTemplate_1.html) from the server instead of using the ng-template.

Am I approaching this right? If not, what's the best way to assign dynamic html content to popovers?


Answer Source

Id's need to be unique, and any data passed through the uib-popover-template will be parsed. The data in the id=myTemplate_{{}} is not being interpreted.

Try something like this:

angular.module('test', [])
  .controller('GreetingController', ['$scope',
    function($scope) {
      $ = [{
        name: 'John'
      }, {
        name: 'Bill'
<script src=""></script>
<script src=""></script>
<div ng-app="test" ng-controller="GreetingController">
  <div ng-repeat="row in data">
    <button class="btn" uib-popover-template="myTemplate_row.html" popover-trigger="mouseenter">View</button>

<script type="text/ng-template" id="myTemplate_row.html">
  <strong>Name</strong>: {{}}
  <strong>Phone</strong>: {{}}
  <strong>Email</strong>: {{}}

Note example doesn't work as I don't have the uib module, but the basics are the same and should show up.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download