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

For the time being, I ended up with this solution, it works but it's not what I wanted (override for angular bootstrap-ui)

app.directive('tpldHelpPopover', ['$timeout', function($timeout){
    return{
        restrict:'A',
        replace:true,
        scope:{
            source:'='
        },
        controller:function($scope, $sce){
            $scope.tpl = $sce.trustAsHtml(
              '<div><a class="pull-right clickable" ng-click="source.visible=false" style="cursor:pointer"><i class="fa fa-close">x</i></a>'+
                '<div class=""></div>'+
                '<strong>'+$scope.source.title+'</strong>'+
            '<p>'+$scope.source.content+'</p>'+
            '</div>')
        },
        link: function(scope, el, attrs){
            scope.$watch('source.visible', function(newVal, oldVal){
                if(newVal == true){
                    $timeout(function(){
                            console.log(el.next().find('.clickable'));
                        el.next().find('.clickable').bind('click', function(){
                            el.trigger('click');
                        })
                    },100);
                }
            });
        },
        template : '<span  uib-popover-html="tpl" popover-is-open="source.visible" popover-placement="right"><button class="btn">Popover Button</button></span>'
    };
}])

plunker: http://plnkr.co/edit/AMAMFddlCCqSN3qgrz6o?p=preview

Answer 2

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>