Merge pull request #204 from leonard-thieu/template-cache

Fix template caching

Author: 45kb

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...

demo/views/template-url-cache.html

@@ -0,0 +1 @@
+<div>I'm a tooltip loaded using templateUrlCache!</div>

index.html

@@ -339,8 +339,24 @@
         tooltip-template="A tooltip with text">Tooltip Bottom</button>
     </div>
 
-    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js"></script>
-    <script type="text/javascript" src="dist/angular-tooltips.min.js"></script>
+    <div>
+      <span tooltips
+        tooltip-template-url="demo/views/template-url-cache.html"
+        tooltip-template-url-cache="true">
+        Tooltip using templateUrlCache
+      </span>
+    </div>
+
+    <div>
+      <span tooltips
+        tooltip-template-url="demo/views/template-url-cache.html"
+        tooltip-template-url-cache="true">
+        Tooltip using templateUrlCache
+      </span>
+    </div>
+
+    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.js"></script>
+    <script type="text/javascript" src="dist/angular-tooltips.js"></script>
     <script type="text/javascript" src="demo/js/index.js"></script>
   </body>
 </html>

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) {