This is my code for implementing a popover using AngularJS. I am trying to figure out how to add custom styling to the popover HTML, but I am having trouble binding elements in that part of the code.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<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>
</head>
<body>
<div ng-app="customDirectives">
<div> <span custom-popover popover-html="Some Popover Text" popover-placement="bottom" popover-label="label"></span>
</div>
</div>
<script>
customDirectives = angular.module('customDirectives', []);
customDirectives.directive('customPopover', function () {
return {
restrict: 'A',
template: '<span>{{label}}</span>',
link: function (scope, el, attrs) {
scope.label = attrs.popoverLabel;
$(el).popover({
trigger: 'click',
html: true,
content: attrs.popoverHtml,
placement: attrs.popoverPlacement
});
}
};
});
angular.module('CustomComponents', ['customDirectives']);
</script>
</body>
</html>