I want to create a html popover with angular-bootstrap popover-template
The directive itself is in path:
app/scripts/directives/popover.js
angular.module('c2gyoApp')
.directive('tariffPopover', function () {
return {
restrict: 'A',
transclude: true,
scope: {
text: '@tariffPopover'
},
template:
'<span ng-transclude></span>' +
' ' +
'<span popover-placement="right" ' +
' popover-template="pop.html" ' +
' popover-trigger="mouseenter" ' +
' class="fa fa-info-circle">' +
'</span>'
};
});
The pop.html is a simple html file:
<h1>Hi</h1>
I'm using it in a view in
app/views/c2g.html
<div class="checkbox">
<label>
<input type="checkbox"
ng-model="rental.airport">
<span tariff-popover="{{info.airport}}">
Flughafenpauschale
</span>
<br/>
</label>
</div>
I can't figure out where I have to put the pop.html template. I've tried the following paths:
- In the base directory of the app app/pop.html
- In the same directory as the popover.js directive app/scripts/pop.html
- In the same directory as the c2g.html view app/views/pop.html
I've also tried setting the popover-template paths to app/pop.html, app/scripts/pop.html and app/views/pop.html. However the Popover doesn't pop up. What's the correct path for the html template?
@Aviro changing the content of pop.html to
<script type="text/ng-template" id="pop.html">
<h1>Hi</h1>
</script>
doesn't help.