popover generates : Cannot read property 'split' of undefined

[wallet77]

Hi,

I have recently updated my frameworks and libs version. I want to use popover directive but it generates and error in jquery (Cannot read property 'split' of undefined).

After debugging I found that problem comes from this line in angular-ui :

var positionStrParts = positionStr.split('-'); (line 910)

This line is call here :

var ttPosition = $position.positionElements(element, tooltip, scope.tt_placement, appendToBody); (line 2533)

So I searched for scope.tt_placement which seems to be the root problem.
I found that this variable is only set here :

attrs.$observe( prefix+'Placement', function ( val ) {
              scope.tt_placement = angular.isDefined( val ) ? val : options.placement;
});

So we observe placement attritube to set scope.tt_placement.

To fix the error I was obliged to set popover-placement and it works fine.
Is it a normal behavior ? In examples I saw some popover without this attribute.
Is it a bug or a documentation/code alignment problem?

In any cases, thanks for your work ;)

Version :

• angular : 1.3
• ui-bootstrap: 0.11.2
• jquery 2.1

[chrisirhc]

AngularJS 1.3 support is still work in progress. Please try again with AngularJS 1.2.x.

[Hotell]

Hi,

I ran into the same issue today and did some research.

Here are my results:

The issue exist only with the latest angular release which is 1.3.1 probably due this "fix" commit angular/angular.js@531a8de

So now when the attribute popover-placement is not present on the element (attrs.hasOwnProperty(key) from the fix), $observe function won't be triggered,
so scope.tt_placement won't be defined via the ternary operator, which should fallback to options.placement property.
So the result is scope.tt_placement === undefined, which is the culprit of the error mentioned.

Please note :

This also affects other popup properties ( which are added to scope in $observe fn ), which can be set via $tooltipProvider,
so this won't work as expected:

angular.module('ui.bootstrap.demo')
.config(function($tooltipProvider) {
      $tooltipProvider.options({
        placement:'top', 
        popupDelay: 250, 
        appendToBody: true
      });
  }
)

you have to specify all these directly via attributes:

<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" popover-placement="top" popover-popup-delay="250" popover-append-to-body="true" class="btn btn-default">Mouseenter</button>

---

Please note again:

This $observe "fix" can have impact also on other ui-bootstrap directives which are using the same technique, if there are any.

whoa, this angular fix has quite messed up things 😞

[wallet77]

Hi,

Thanks Hotell for information.

Indeed, with angular 1.2.x it works fine.
But I really want to play with new angular version.

So as a workaround (and as Hotell said), instead of :

<div popover="test">

prefer that :

<div popover="test" popover-placement="...">

Should do the trick.

Hope It can help.

[chasenlehara]

Is this still an issue? I’m trying to reproduce this in a Plunker so I can write a test and submit a PR, but I haven’t had any luck. Would someone mind writing a Plunker for this issue please?

[mightydes]

@chasenlehara
It is. Uncaught TypeError: Cannot read property 'split' of undefined.
Latest bower angular and alngular UI.

[tholford]

+1, experiencing this issue for both tooltips and popovers (dependency on tooltips) with Angular 1.3

[aeisenberg]

+1

Seeing this too in popovers. I can confirm that the work around is to explicitly specify the popover-placement attribute in the html and the error goes away.

[cnaccio]

There seems to be a problem with placement/position of tooltips, and popovers. It has something to do with the changes to angular.isDefined which works differently in AngularJS 1.2 & 1.3

Here are a few directives to patch the issues by setting defaults

        // Bootstrap UI fixes after upgrading to Angular 1.3
        .directive('tooltip', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
                    attrs.tooltipPlacement = attrs.tooltipPlacement || 'top';
                    attrs.tooltipAnimation = attrs.tooltipAnimation || true;
                    attrs.tooltipPopupDelay = attrs.tooltipPopupDelay || 0;
                    attrs.tooltipTrigger = attrs.tooltipTrigger || 'mouseenter';
                    attrs.tooltipAppendToBody = attrs.tooltipAppendToBody || false;
                }
            }
        })

        .directive('popover', function() {
            return {
                restrict: 'EA',
                link: function(scope, element, attrs) {
                    attrs.popoverPlacement = attrs.popoverPlacement || 'top';
                    attrs.popoverAnimation = attrs.popoverAnimation || true;
                    attrs.popoverPopupDelay = attrs.popoverPopupDelay || 0;
                    attrs.popoverTrigger = attrs.popoverTrigger || 'mouseenter';
                    attrs.popoverAppendToBody = attrs.popoverAppendToBody || false;
                }
            }
        })

[RobJacobs]

I'm not seeing this issue anymore when running against the latest master. Seems somewhere along the way the observe for the placement attribute was removed and the prepPlacement function is called whenever the tooltip is opened (showTooltipBind() -> prepareTooltip() -> prepPlacement()) which sets the scope.placement property correctly.

[karianna]

Closing as already fixed.