feat(popover): respect popover-class option

This functionality now works the same between tooltips and popovers. Closes #3569
angular-ui · Apr 30, 2015 · 88a41dc · 88a41dc
1 parent 6af627a
commit 88a41dc
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 2 deletions.
diff --git a/src/popover/popover.js b/src/popover/popover.js
@@ -9,7 +9,7 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
   return {
     restrict: 'EA',
     replace: true,
-    scope: { title: '@', contentExp: '&', placement: '@', animation: '&', isOpen: '&',
+    scope: { title: '@', contentExp: '&', placement: '@', popupClass: '@', animation: '&', isOpen: '&',
       originScope: '&' },
     templateUrl: 'template/popover/popover-template.html'
   };
@@ -25,7 +25,7 @@ angular.module( 'ui.bootstrap.popover', [ 'ui.bootstrap.tooltip' ] )
   return {
     restrict: 'EA',
     replace: true,
-    scope: { title: '@', content: '@', placement: '@', animation: '&', isOpen: '&' },
+    scope: { title: '@', content: '@', placement: '@', popupClass: '@', animation: '&', isOpen: '&' },
     templateUrl: 'template/popover/popover.html'
   };
 })

diff --git a/src/popover/test/popover-template.spec.js b/src/popover/test/popover-template.spec.js
@@ -76,5 +76,54 @@ describe('popover template', function() {
     expect( elmBody.children().length ).toBe( 1 );
   }));
 
+  describe('supports options', function () {
+
+    describe('placement', function () {
+
+      it('can specify an alternative, valid placement', inject(function ($compile) {
+        elmBody = angular.element(
+          '<div><span popover-template="templateUrl" popover-placement="left">Trigger</span></div>'
+        );
+        $compile(elmBody)(scope);
+        scope.$digest();
+        elm = elmBody.find('span');
+        elmScope = elm.scope();
+        tooltipScope = elmScope.$$childTail;
+
+        elm.trigger( 'click' );
+        expect( tooltipScope.isOpen ).toBe( true );
+
+        expect( elmBody.children().length ).toBe( 2 );
+        var ttipElement = elmBody.find('div.popover');
+        expect(ttipElement).toHaveClass('left');
+      }));
+
+    });
+
+    describe('class', function () {
+
+      it('can specify a custom class', inject(function ($compile) {
+        elmBody = angular.element(
+          '<div><span popover-template="templateUrl" popover-class="custom">Trigger</span></div>'
+        );
+        $compile(elmBody)(scope);
+        scope.$digest();
+        elm = elmBody.find('span');
+        elmScope = elm.scope();
+        tooltipScope = elmScope.$$childTail;
+
+        elm.trigger( 'click' );
+        expect( tooltipScope.isOpen ).toBe( true );
+
+        expect( elmBody.children().length ).toBe( 2 );
+        var ttipElement = elmBody.find('div.popover');
+        expect(ttipElement).toHaveClass('custom');
+      }));
+
+    });
+
+  });
+
+
 });
 
diff --git a/src/popover/test/popover.spec.js b/src/popover/test/popover.spec.js
@@ -92,6 +92,54 @@ describe('popover', function() {
     expect(elmBody.children().eq(1)).not.toHaveClass('fade');
   }));
 
+  describe('supports options', function () {
+
+    describe('placement', function () {
+
+      it('can specify an alternative, valid placement', inject(function ($compile) {
+        elmBody = angular.element(
+          '<div><span popover="popover text" popover-placement="left">Trigger here</span></div>'
+        );
+        $compile(elmBody)(scope);
+        scope.$digest();
+        elm = elmBody.find('span');
+        elmScope = elm.scope();
+        tooltipScope = elmScope.$$childTail;
+
+        elm.trigger( 'click' );
+        expect( tooltipScope.isOpen ).toBe( true );
+
+        expect( elmBody.children().length ).toBe( 2 );
+        var ttipElement = elmBody.find('div.popover');
+        expect(ttipElement).toHaveClass('left');
+      }));
+
+    });
+
+    describe('class', function () {
+
+      it('can specify a custom class', inject(function ($compile) {
+        elmBody = angular.element(
+          '<div><span popover="popover text" popover-class="custom">Trigger here</span></div>'
+        );
+        $compile(elmBody)(scope);
+        scope.$digest();
+        elm = elmBody.find('span');
+        elmScope = elm.scope();
+        tooltipScope = elmScope.$$childTail;
+
+        elm.trigger( 'click' );
+        expect( tooltipScope.isOpen ).toBe( true );
+
+        expect( elmBody.children().length ).toBe( 2 );
+        var ttipElement = elmBody.find('div.popover');
+        expect(ttipElement).toHaveClass('custom');
+      }));
+
+    });
+
+  });
+
 });