Nick Nick - 1 year ago 1207
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_{{row.id}}.html'" popover-trigger="mouseenter">View</button>
<script type="text/ng-template" id="myTemplate_{{row.id}}.html">
<strong>Name</strong>: {{row.name}}<br/>
<strong>Phone</strong>: {{row.phone}}<br/>
<strong>Email</strong>: {{row.email}}
</script>
</div>


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?

Thanks.

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_{{row.id}} is not being interpreted.

Try something like this:

angular.module('test', [])
  .controller('GreetingController', ['$scope',
    function($scope) {
      $scope.data = [{
        name: 'John'
      }, {
        name: 'Bill'
      }];
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></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>
  </div>
</div>

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

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