From f7e4995d5eb051b2491f9170dec44f7f6f3ec3fb Mon Sep 17 00:00:00 2001
From: Chris Chua <chris.sirhc@gmail.com>
Date: Tue, 7 Apr 2015 23:25:30 -0700
Subject: [PATCH] refactor(tooltip): make tooltip-class more robust
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add tooltip-class support to tooltip-template
- Remove observer for tooltip-class, it’s evaluated once on tooltip
  preparation instead
- Remove interpolation on class attribute
  Interpolation on the class attribute can have undesirable mangling
  effects when use with a directive that has `replace: true`. It also
  doesn’t work properly with ngAnimate.

Relates to #3126
---
 src/tooltip/tooltip.js                        | 32 ++++++++++---------
 template/popover/popover-template.html        |  4 +--
 template/popover/popover.html                 |  4 +--
 template/tooltip/tooltip-html-popup.html      |  5 ++-
 .../tooltip/tooltip-html-unsafe-popup.html    |  5 ++-
 template/tooltip/tooltip-template-popup.html  |  5 ++-
 6 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
index c3c5a3818c..9189c70f4e 100644
--- a/src/tooltip/tooltip.js
+++ b/src/tooltip/tooltip.js
@@ -262,6 +262,7 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
             }
 
             function prepareTooltip() {
+              prepPopupClass();
               prepPlacement();
               prepPopupDelay();
             }
@@ -291,9 +292,9 @@ angular.module( 'ui.bootstrap.tooltip', [ 'ui.bootstrap.position', 'ui.bootstrap
               ttScope.title = val;
             });
 
-            attrs.$observe( prefix+'Class', function ( val ) {
-              ttScope.popupClass = val;
-            });
+            function prepPopupClass() {
+              ttScope.popupClass = attrs[prefix + 'Class'];
+            }
 
             function prepPlacement() {
               var val = attrs[ prefix + 'Placement' ];
@@ -426,27 +427,28 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   };
 }])
 
-// Apply animate class without animating itself
-.directive('tooltipAnimateClass', function () {
+/**
+ * Note that it's intentional that these classes are *not* applied through $animate.
+ * They must not be animated as they're expected to be present on the tooltip on
+ * initialization.
+ */
+.directive('tooltipClasses', function () {
   return {
     restrict: 'A',
     link: function (scope, element, attrs) {
+      if (scope.placement) {
+        element.addClass(scope.placement);
+      }
+      if (scope.popupClass) {
+        element.addClass(scope.popupClass);
+      }
       if (scope.animation()) {
-        element.addClass(attrs.tooltipAnimateClass);
+        element.addClass(attrs.tooltipAnimationClass);
       }
     }
   };
 })
 
-.directive('tooltipPlacementClass', function () {
-  return {
-    restrict: 'A',
-    link: function (scope, element, attrs) {
-      element.addClass(scope.placement);
-    }
-  };
-})
-
 .directive( 'tooltipPopup', function () {
   return {
     restrict: 'EA',
diff --git a/template/popover/popover-template.html b/template/popover/popover-template.html
index 0d3fca4521..1525ffddb9 100644
--- a/template/popover/popover-template.html
+++ b/template/popover/popover-template.html
@@ -1,6 +1,6 @@
 <div class="popover"
-  tooltip-placement-class
-  tooltip-animate-class="fade"
+  tooltip-animation-class="fade"
+  tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
diff --git a/template/popover/popover.html b/template/popover/popover.html
index 1fd11a2656..edc2985375 100644
--- a/template/popover/popover.html
+++ b/template/popover/popover.html
@@ -1,6 +1,6 @@
 <div class="popover"
-  tooltip-placement-class
-  tooltip-animate-class="fade"
+  tooltip-animation-class="fade"
+  tooltip-classes
   ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
diff --git a/template/tooltip/tooltip-html-popup.html b/template/tooltip/tooltip-html-popup.html
index b236a240e7..23f60fb55d 100644
--- a/template/tooltip/tooltip-html-popup.html
+++ b/template/tooltip/tooltip-html-popup.html
@@ -1,4 +1,7 @@
-<div class="tooltip {{placement}} {{popupClass}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip"
+  tooltip-animation-class="fade"
+  tooltip-classes
+  ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" ng-bind-html="contentExp()"></div>
 </div>
diff --git a/template/tooltip/tooltip-html-unsafe-popup.html b/template/tooltip/tooltip-html-unsafe-popup.html
index 676a27c518..34639f4cef 100644
--- a/template/tooltip/tooltip-html-unsafe-popup.html
+++ b/template/tooltip/tooltip-html-unsafe-popup.html
@@ -1,4 +1,7 @@
-<div class="tooltip {{placement}} {{popupClass}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip"
+  tooltip-animation-class="fade"
+  tooltip-classes
+  ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner" bind-html-unsafe="content"></div>
 </div>
diff --git a/template/tooltip/tooltip-template-popup.html b/template/tooltip/tooltip-template-popup.html
index c934fc338d..04f4a7a759 100644
--- a/template/tooltip/tooltip-template-popup.html
+++ b/template/tooltip/tooltip-template-popup.html
@@ -1,4 +1,7 @@
-<div class="tooltip {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="tooltip"
+  tooltip-animation-class="fade"
+  tooltip-classes
+  ng-class="{ in: isOpen() }">
   <div class="tooltip-arrow"></div>
   <div class="tooltip-inner"
     tooltip-template-transclude="content"