Menu
I try to implement a tooltip with angularjs template inside. For this, I use "uib-tooltip-html" and I add an attribute on the element to compile the template. But it doesn't work. Here is the code Here is the plunker http://plnkr.co/edit/y1TvogsFFBoBVra3gO3F?p=preview
<html>
<head lang="en">
<meta charset="UTF-8"/>
<title>uib-tooltip-html test</title>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular-sanitize.min.js"></script>
<script>
var app = angular.module("test", ['ngSanitize','ui.bootstrap']).config(function($sceProvider) {
$sceProvider.enabled(false);
});
app.controller("testController", function($scope, $http, $interval, $sce) {
$scope.text = $sce.trustAsHtml('<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>');
});
app.directive('compileTemplate', function($compile, $parse){
return {
link: function(scope, element, attr){
var parsed = $parse(attr.uibTooltipHtml);
console.log(attr.uibTooltipHtml);
function getStringValue() { return (parsed(scope) || '').toString(); }
console.log(getStringValue())
//Recompile if the template changes
scope.$watch(getStringValue, function() {
console.log('ca passe');
$compile(element, null, -9999)(scope); //The -9999 makes it skip directives so that we do not recompile ourselves
});
}
}
});
</script>
</head>
<body>
<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip="Some text" >
A Thing With a Tooltip
</p>
<p style="margin-top: 5em;" uib-tooltip-html="text" compile-template>
A Thing With an HTML Tooltip
</p>
</div>
Thank you in advance for your answer
783
Overview for tooltip. The Angular Material tooltip provides a text label that is displayed when the user hovers over or longpresses an element.
$uibmodal is a service to create modal windows. Uibmodal is the UI Bootstrap component written in AngularJS. It enables us to use Bootstrap in AngularJS. It provides directives for all bootstrap with some extra like, datepicker, timepicker etc.
uib-accordion-group settings heading (Default: none ) - The clickable text on the group's header. You need one to be able to click on the header for toggling. is-disabled $ (Default: false ) - Whether the accordion group is disabled or not.
The ng-app directive is a starting point of AngularJS Application. It initializes the AngularJS framework automatically. AngularJS framework will first check for ng-app directive in a HTML document after the entire document is loaded and if ng-app is found, it bootstraps itself and compiles the HTML template.
You can use uib-tooltip-template like this:
<p style="margin-top: 5em;" uib-tooltip-template="'myTooltipTemplate.html'">
A Thing With an HTML Tooltip
</p>
And then in put your html in myTooltipTemplate.html:
<table><tr ng-repeat="x in [1,2,3]"><td>{{ x }}</td></tr></table>
The template goes in a separate file.
documentation: https://angular-ui.github.io/bootstrap/#/tooltip
plnkr: http://plnkr.co/edit/tiCHpd0LipixXbO4Xfa5?p=preview
161
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
