angular ui-bootstrap popover template content and close button

Question

Using ui-bootstrap I can use a custom template for popover. However there are couple of issues I'm facing:

1 - close button

I can use popover-is-open to open and close. However I then need to keep track in a variable and if I have a page with 20 popovers (a big form) then it's not a good solution to have so many variables in the controller just to show and hide a popover on clicking close inside the template.

2 - content/data in popover

I can access data from the controller in the template for the content for the template but then I need to write 20 templates for 20 popovers.

e.g.

$scope.popovers = {
un: {visible: false, title: 'Help', content: 'some explanation here'},
ts: {visible: false, title: 'another title', content: 'some explanation here again'}
}

and then the template:

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>
        <a class="pull-right clickable" ng-click="popovers.un.visible = false"><i class="fa fa-close"></i></a>
        <div class="tooltip-info__arrow"></div>
        <strong>{{popovers.un.title}}</strong>
        <p>{{popovers.un.content}}</p>
    </div>
</script>

and again:

<script type="text/ng-template" id="myPopoverTemplate.html">
    <div>
        <a class="pull-right clickable" ng-click="popovers.ts.visible = false"><i class="fa fa-close"></i></a>
        <div class="tooltip-info__arrow"></div>
        <strong>{{popovers.ts.title}}</strong>
        <p>{{popovers.ts.content}}</p>
    </div>
</script>

UPDATE: I tried to override using decorator but couldn't. Is there any built-in option to reduce this "repeativeness" or,,, how to override for custom behaviour?

Answer 1

Here is an untested code that will give you the idea :

angular.directive('myDirective', function(){
    return{
      restrict:'A'
      replace:true 
      scope:{
         title:'@myTitle',
         content:'@myContent',
         visible:'=visible'
      }, 
      template : '<div>'+
    '<a class="pull-right clickable" ng-click="visible = false">'+
    '<i class="fa fa-close"></i></a>'
    '<div class="tooltip-info__arrow"></div>'+
    '<strong>{{title}}</strong>'+
    '<p>{{content}}</p>'+
'</div>'
    };
});

Usage :

<div my-directive my-title="{{popovers.ts.title}}" 
my-content="{{ppovers.ts.content}} visible="popovers.ts.visible"></div>