Nick Nick - 6 months ago 738
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

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.

Comments