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

Fix template caching
720kb · May 20, 2017 · 6fb45a3 · 6fb45a3
2 parents 44da315 + 9384997
commit 6fb45a3
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 48 deletions.
diff --git 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
@@ -0,0 +1 @@
+<div>I'm a tooltip loaded using templateUrlCache!</div>
diff --git a/index.html b/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>
diff --git 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) {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<div>I'm a tooltip loaded using templateUrlCache!</div>