diff --git a/Readme.md b/Readme.md index ab28346..20e8101 100644 --- a/Readme.md +++ b/Readme.md @@ -106,8 +106,8 @@ Sometimes you may need to set all of your tooltips options in one place, you can ```javascript .config(['tooltipsConfProvider', function configConf(tooltipsConfProvider) { tooltipsConfProvider.configure({ - 'smart':true, - 'size':'large', + 'smart': true, + 'size': 'large', 'speed': 'slow', 'tooltipTemplateUrlCache': true //etc... diff --git a/demo/views/template-url-cache.html b/demo/views/template-url-cache.html new file mode 100644 index 0000000..686184c --- /dev/null +++ b/demo/views/template-url-cache.html @@ -0,0 +1 @@ +
I'm a tooltip loaded using templateUrlCache!
\ No newline at end of file diff --git a/index.html b/index.html index c195d47..46425c6 100644 --- a/index.html +++ b/index.html @@ -339,8 +339,24 @@ tooltip-template="A tooltip with text">Tooltip Bottom - - +
+ + Tooltip using templateUrlCache + +
+ +
+ + Tooltip using templateUrlCache + +
+ + + diff --git a/lib/angular-tooltips.js b/lib/angular-tooltips.js index 1bbabc2..9c6fabc 100644 --- a/lib/angular-tooltips.js +++ b/lib/angular-tooltips.js @@ -561,65 +561,79 @@ registerOnScrollFrom(parentElement); } } + , showTemplate = function showTemplate(template) { + + tooltipElement.removeClass('_force-hidden'); //see lines below, this forces to hide tooltip when is empty + tipTipElement.empty(); + tipTipElement.append(closeButtonElement); + tipTipElement.append(template); + $timeout(function doLater() { + + onTooltipShow(); + }); + } + , hideTemplate = function hideTemplate() { + + //hide tooltip because is empty + tipTipElement.empty(); + tooltipElement.addClass('_force-hidden'); //force to be hidden if empty + } + , getTemplate = function getTemplate(tooltipTemplateUrl) { + + var template = $templateCache.get(tooltipTemplateUrl); + + if (typeof template === 'undefined') { + + // How should failing to load the template be handled? + template = $http.get(tooltipTemplateUrl).then(function onGetTemplateSuccess(response) { + + return response.data; + }); + $templateCache.put(tooltipTemplateUrl, template); + } + + return template; + } , onTooltipTemplateChange = function onTooltipTemplateChange(newValue) { + if (newValue) { - tooltipElement.removeClass('_force-hidden'); //see lines below, this forces to hide tooltip when is empty - tipTipElement.empty(); - tipTipElement.append(closeButtonElement); - tipTipElement.append(newValue); - $timeout(function doLaterShow() { - - onTooltipShow(); - }); + + showTemplate(newValue); } else { - //hide tooltip because is empty - tipTipElement.empty(); - tooltipElement.addClass('_force-hidden'); //force to be hidden if empty + + hideTemplate(); } } , onTooltipTemplateUrlChange = function onTooltipTemplateUrlChange(newValue) { + if (newValue && !$attrs.tooltipTemplateUrlCache) { - - $http.get(newValue).then(function onResponse(response) { - - if (response && - response.data) { - - tooltipElement.removeClass('_force-hidden'); //see lines below, this forces to hide tooltip when is empty - tipTipElement.empty(); - tipTipElement.append(closeButtonElement); - tipTipElement.append($compile(response.data)(scope)); - $timeout(function doLater() { - - onTooltipShow(); - }); - } + + getTemplate(newValue).then(function onGetTemplateSuccess(template) { + + showTemplate($compile(template)(scope)); + }).catch(function onGetTemplateFailure(reason) { + + $log.error(reason); }); } else { - //hide tooltip because is empty - tipTipElement.empty(); - tooltipElement.addClass('_force-hidden'); //force to be hidden if empty + + hideTemplate(); } } , onTooltipTemplateUrlCacheChange = function onTooltipTemplateUrlCacheChange(newValue) { + if (newValue && $attrs.tooltipTemplateUrl) { + + getTemplate($attrs.tooltipTemplateUrl).then(function onGetTemplateSuccess(template) { + + showTemplate($compile(template)(scope)); + }).catch(function onGetTemplateFailure(reason) { - var template = $templateCache.get($attrs.tooltipTemplateUrl); - - if (typeof template !== 'undefined') { - - tooltipElement.removeClass('_force-hidden'); //see lines below, this forces to hide tooltip when is empty - tipTipElement.empty(); - tipTipElement.append(closeButtonElement); - tipTipElement.append($compile(template)(scope)); - $timeout(function doLater() { - onTooltipShow(); - }); - } + $log.error(reason); + }); } else { - //hide tooltip because is empty - tipTipElement.empty(); - tooltipElement.addClass('_force-hidden'); //force to be hidden if empty + + hideTemplate(); } } , onTooltipSideChange = function onTooltipSideChange(newValue) {