Skip to content

Instantly share code, notes, and snippets.

@almeidaalex

almeidaalex/index.html

Last active August 29, 2015 14:16
Show Gist options
  • Save almeidaalex/58ed3dc3fff025cde24e to your computer and use it in GitHub Desktop.
Save almeidaalex/58ed3dc3fff025cde24e to your computer and use it in GitHub Desktop.
Download ZIP
Open native AngularJS popover with text/ng-template
Raw
index.html
<!DOCTYPE html>
<html ng-app="pop" >
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="bower_components/angularjs/angular.js"></script>
<script type="text/javascript" src="bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap.js"></script>
<script type="text/javascript" src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<title></title>
</head>
<body>
<div ng-controller="popCtrl as p">
{{p.htmlTooltip}}
<br />
<button class="btn btn-primary"
data-container="body"
ng-click="p.popover($event)"
title="Popover title"
data-content="<strong>And</strong> here's some amazing content. {{p.htmlTooltip}}">
<span>PopOver</span>
</button>
<br />
<button class="btn btn-primary"
role="button"
data-container="body"
ng-click="p.popover($event)"
data-trigger="focus"
>
<span>PopOver 2</span>
</button>
</div>
</body>
<script type="text/ng-template" id="template.html">
<ul class="nav nav-pills nav-stacked nav-sm" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#" ng-click="p.itemClick()">{{p.htmlTooltip}}</a></li>
</ul>
</script>
<script type="text/javascript">
angular.module('pop', ['ui.bootstrap'])
.controller('popCtrl',['$scope','$compile', '$templateCache', function($scope, $compile, $templateCache){
var self = this;
self.htmlTooltip = 'Click here buddy!';
self.popover = function(e) {
var contentTemplate = $compile($templateCache.get('template.html'))($scope);
$(e.currentTarget).popover({placement: 'right', html: true, content: contentTemplate});
$(e.currentTarget).popover('toggle');
}
self.itemClick = function(){
alert('Wow, I was clicked, amazing!')
}
}]);
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment