fix(tooltip): tooltips will hide on scope.$destroy

When an element on which the tooltip is applied is destroyed (along with its scope), the tooltip popup will now be closed if it was open. Also refactored the $locationChangeSuccess binding as well to not waste a run of `hide()` unless the tooltip was already open, following the same pattern used in this bug fix. Closes #410.
angular-ui · May 9, 2013 · 3e5a58e · 3e5a58e
1 parent c532659
commit 3e5a58e
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/src/tooltip/test/tooltip.spec.js b/src/tooltip/test/tooltip.spec.js
@@ -12,7 +12,7 @@ describe('tooltip', function() {
 
   beforeEach(inject(function($rootScope, $compile) {
     elmBody = angular.element( 
-      '<div><span tooltip="tooltip text">Selector Text</span></div>' 
+      '<div><span tooltip="tooltip text" tooltip-animation="false">Selector Text</span></div>' 
     );
 
     scope = $rootScope;
@@ -123,6 +123,15 @@ describe('tooltip', function() {
     expect(elmBody.children().length).toBe(1);
   }));
 
+  it( 'should close the tooltip when its trigger element is destroyed', inject( function() {
+    elm.trigger( 'mouseenter' );
+    expect( elmScope.tt_isOpen ).toBe( true );
+
+    elm.remove();
+    elmScope.$destroy();
+    expect( elmBody.children().length ).toBe( 0 );
+  }));
+
   describe('with specified popup delay', function () {
 
     beforeEach(inject(function ($compile) {

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -267,10 +267,24 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position' ] )
             }
           });
 
-          //if a tooltip is attached to <body> we need to remove it on location change
+          // if a tooltip is attached to <body> we need to remove it on
+          // location change as its parent scope will probably not be destroyed
+          // by the change.
           if ( options.appendToBody ) {
-            scope.$on('$locationChangeSuccess', hide);
+            scope.$on('$locationChangeSuccess', function closeTooltipOnLocationChangeSuccess () {
+            if ( scope.tt_isOpen ) {
+              hide();
+            }
+          });
           }
+
+          // if this trigger element is destroyed while the tooltip is open, we
+          // need to close the tooltip.
+          scope.$on('$destroy', function closeTooltipOnDestroy () {
+            if ( scope.tt_isOpen ) {
+              hide();
+            }
+          });
         }
       };
     };