fix(popover): make it work with ngAnimate

Closes #3482 Fixes #3375
angular-ui · Apr 6, 2015 · 461087b · 461087b
1 parent 8a55244
commit 461087b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/src/tooltip/tooltip.js b/src/tooltip/tooltip.js
@@ -421,6 +421,27 @@ function ($animate ,  $sce ,  $compile ,  $templateRequest) {
   };
 }])
 
+// Apply animate class without animating itself
+.directive('tooltipAnimateClass', function () {
+  return {
+    restrict: 'A',
+    link: function (scope, element, attrs) {
+      if (scope.animation()) {
+        element.addClass(attrs.tooltipAnimateClass);
+      }
+    }
+  };
+})
+
+.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
@@ -1,4 +1,7 @@
-<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="popover"
+  tooltip-placement-class
+  tooltip-animate-class="fade"
+  ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
   <div class="popover-inner">

diff --git a/template/popover/popover.html b/template/popover/popover.html
@@ -1,4 +1,7 @@
-<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
+<div class="popover"
+  tooltip-placement-class
+  tooltip-animate-class="fade"
+  ng-class="{ in: isOpen() }">
   <div class="arrow"></div>
 
   <div class="popover-inner">