AngularJS Bootstrap Popover Directive

by Guruprasad Gopalkrishna

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<div ng-app="customDirectives" ng-controller="MyCtrl">
    
    
    <div> <span cust-popover popover-html="Some Poppy Text"  popover-placement="bottom" myId="#myId" newvar="items" popover-label="Label"></span>

    </div>
    
</div>

JavaScript

customDirectives = angular.module('customDirectives', []);
function MyCtrl($scope) {
    $scope.items = ['abc','dev','it'];
    
    
}

customDirectives.directive('custPopover', function ($compile) {
    return {
        scope : {
            items : '=items'  
        }, 
        restrict: 'A',
        
        template: '<span>Label</span>',
        link: function (scope, el, attrs) {
            scope.label = attrs.popoverLabel;
            var temp = '<ul><li ng-repeat="item in items">{{item}}</li></ul>';
            var contents = $compile(temp)(scope);
            console.log(scope);
            $(el).popover({
                trigger: 'click',
                html: true,
                content:  contents,
                placement: attrs.popoverPlacement
            });
        }
    };
});

angular.module('CustomComponents', ['customDirectives']);