src/js/ngPopover.js
function($scope, element, attrs, ctrl) {
                $scope.popoverClass = attrs.popoverClass;
                $scope.dropDirection = attrs.direction || 'bottom';
                var left, top;
                var trigger = document.querySelector('#'+$scope.trigger);
                var target = document.querySelector('.ng-popover[trigger="'+$scope.trigger+'"]');

                // Add click event listener to trigger
                trigger.addEventListener('click', function(ev){
                    var left, top;
                    var trigger = this; //get trigger element 
                    var target =  document.querySelector('.ng-popover[trigger="'+$scope.trigger+'"]'); //get triger's target popover
                    ev.preventDefault();
                    calcPopoverPosition(trigger, target); //calculate the position of the popover
                   hideAllPopovers(trigger);
                    target.classList.toggle('hide'); //toggle display of target popover
                    // if target popover is visible then add click listener to body and call the open popover callback
                    if(!target.classList.contains('hide')){
                        ctrl.registerBodyListener();
                        $scope.onOpen();
                        $scope.$apply();
                    }
                    //else remove click listener from body and call close popover callback
                    else{
                        ctrl.unregisterBodyListener();
                        $scope.onClose();
                        $scope.$apply();
                    }
                });

                var getTriggerOffset = function(){
                    var triggerRect = trigger.getBoundingClientRect();
                    var bodyRect = document.body.getBoundingClientRect();
                    return {
                        top: triggerRect.top + document.body.scrollTop,
                        left: triggerRect.left + document.body.scrollLeft
                    }
                };

                // calculates the position of the popover
                var calcPopoverPosition = function(trigger, target){
                    target.classList.toggle('hide');
                    var targetWidth = target.offsetWidth;
                    var targetHeight = target.offsetHeight;
                    target.classList.toggle('hide');
                    var triggerWidth = trigger.offsetWidth;
                    var triggerHeight = trigger.offsetHeight;
                    switch($scope.dropDirection){
                        case 'left': {
                            left = getTriggerOffset().left - targetWidth - 10 + 'px';
                            top = getTriggerOffset().top + 'px';
                            break;
                        }

                        case 'right':{
                            left = getTriggerOffset().left + triggerWidth + 10 + 'px';
                            top = getTriggerOffset().top + 'px';
                            break;
                        } 

                        case'top':{
                            left = getTriggerOffset().left + 'px';
                            top = getTriggerOffset().top - targetHeight - 10 + 'px';
                            break;
                        }

                        default:{
                            left = getTriggerOffset().left +'px';
                            top = getTriggerOffset().top + triggerHeight + 10 + 'px'
                        }
                    }
                    target.style.position = 'absolute';
                    target.style.left = left;
                    target.style.top = top;
                }
                calcPopoverPosition(trigger, target);
            }
function($scope, element, attrs, ctrl) {
                $scope.popoverClass = attrs.popoverClass;
                $scope.dropDirection = attrs.direction || 'bottom';
                var left, top;
                var trigger = document.querySelector('#'+$scope.trigger);
                var target = document.querySelector('.ng-popover[trigger="'+$scope.trigger+'"]');

                // Add click event listener to trigger
                trigger.addEventListener('click', function(ev){
                    var left, top;
                    var trigger = this; //get trigger element 
                    var target =  document.querySelector('.ng-popover[trigger="'+$scope.trigger+'"]'); //get triger's target popover
                    ev.preventDefault();
                    calcPopoverPosition(trigger, target); //calculate the position of the popover
                   hideAllPopovers(trigger);
                    target.classList.toggle('hide'); //toggle display of target popover
                    // if target popover is visible then add click listener to body and call the open popover callback
                    if(!target.classList.contains('hide')){
                        ctrl.registerBodyListener();
                        $scope.onOpen();
                        $scope.$apply();
                    }
                    //else remove click listener from body and call close popover callback
                    else{
                        ctrl.unregisterBodyListener();
                        $scope.onClose();
                        $scope.$apply();
                    }
                });

                var getTriggerOffset = function(){
                    var triggerRect = trigger.getBoundingClientRect();
                    var bodyRect = document.body.getBoundingClientRect();
                    return {
                        top: triggerRect.top + document.body.scrollTop,
                        left: triggerRect.left + document.body.scrollLeft
                    }
                };

                // calculates the position of the popover
                var calcPopoverPosition = function(trigger, target){
                    target.classList.toggle('hide');
                    var targetWidth = target.offsetWidth;
                    var targetHeight = target.offsetHeight;
                    target.classList.toggle('hide');
                    var triggerWidth = trigger.offsetWidth;
                    var triggerHeight = trigger.offsetHeight;
                    switch($scope.dropDirection){
                        case 'left': {
                            left = getTriggerOffset().left - targetWidth - 10 + 'px';
                            top = getTriggerOffset().top + 'px';
                            break;
                        }

                        case 'right':{
                            left = getTriggerOffset().left + triggerWidth + 10 + 'px';
                            top = getTriggerOffset().top + 'px';
                            break;
                        } 

                        case'top':{
                            left = getTriggerOffset().left + 'px';
                            top = getTriggerOffset().top - targetHeight - 10 + 'px';
                            break;
                        }

                        default:{
                            left = getTriggerOffset().left +'px';
                            top = getTriggerOffset().top + triggerHeight + 10 + 'px'
                        }
                    }
                    target.style.position = 'absolute';
                    target.style.left = left;
                    target.style.top = top;
                }
                calcPopoverPosition(trigger, target);
            }
function ( $scope , element , attrs , ctrl ) { $scope . popoverClass = attrs . popoverClass ; $scope . dropDirection = attrs . direction || 'bottom' ; var left , top ; var trigger = document . querySelector ( '#' + $scope . trigger ) ; var target = document . querySelector ( '.ng-popover[trigger="' + $scope . trigger + '"]' ) ; // Add click event listener to trigger trigger . addEventListener ( 'click' , function ( ev ) { var left , top ; var trigger = this ; //get trigger element  var target = document . querySelector ( '.ng-popover[trigger="' + $scope . trigger + '"]' ) ; //get triger's target popover ev . preventDefault ( ) ; calcPopoverPosition ( trigger , target ) ; //calculate the position of the popover hideAllPopovers ( trigger ) ; target . classList . toggle ( 'hide' ) ; //toggle display of target popover // if target popover is visible then add click listener to body and call the open popover callback if ( ! target . classList . contains ( 'hide' ) ) { ctrl . registerBodyListener ( ) ; $scope . onOpen ( ) ; $scope . $apply ( ) ; } //else remove click listener from body and call close popover callback else { ctrl . unregisterBodyListener ( ) ; $scope . onClose ( ) ; $scope . $apply ( ) ; } } ) ; var getTriggerOffset = function ( ) { var triggerRect = trigger . getBoundingClientRect ( ) ; var bodyRect = document . body . getBoundingClientRect ( ) ; return { top : triggerRect . top + document . body . scrollTop , left : triggerRect . left + document . body . scrollLeft } } ; // calculates the position of the popover var calcPopoverPosition = function ( trigger , target ) { target . classList . toggle ( 'hide' ) ; var targetWidth = target . offsetWidth ; var targetHeight = target . offsetHeight ; target . classList . toggle ( 'hide' ) ; var triggerWidth = trigger . offsetWidth ; var triggerHeight = trigger . offsetHeight ; switch ( $scope . dropDirection ) { case 'left' : { left = getTriggerOffset ( ) . left - targetWidth - 10 + 'px' ; top = getTriggerOffset ( ) . top + 'px' ; break ; } case 'right' : { left = getTriggerOffset ( ) . left + triggerWidth + 10 + 'px' ; top = getTriggerOffset ( ) . top + 'px' ; break ; } case 'top' : { left = getTriggerOffset ( ) . left + 'px' ; top = getTriggerOffset ( ) . top - targetHeight - 10 + 'px' ; break ; } default : { left = getTriggerOffset ( ) . left + 'px' ; top = getTriggerOffset ( ) . top + triggerHeight + 10 + 'px' } } target . style . position = 'absolute' ; target . style . left = left ; target . style . top = top ; } calcPopoverPosition ( trigger , target ) ; }
we want to insert custom content inside the directive
we want to insert custom content inside the directive