Cannot read property 'direction' of undefined after upgrade to 0.13.0

[ScottFred]

After upgrading to 0.13.0, we are getting the following errors when we navigate across a top menu system we implemented; this used to work in 0.12.x

TypeError: Cannot read property 'direction' of undefined
    at Object.beforeAddClass [as fn] (ui-bootstrap-tpls.js:615)
    at angular-animate.js:739
    at forEach (angular.js:323)
    at run (angular-animate.js:727)
    at Object.before (angular-animate.js:768)
    at performAnimation (angular-animate.js:1411)
    at angular-animate.js:1217
    at angular-animate.js:539
    at Scope.$digest (angular.js:14358)
    at Scope.$apply (angular.js:14571)

------- ui-bootstrap-tpls.js:608 - 616 ------

function ($animate) {
  return {
    beforeAddClass: function (element, className, done) {
      // Due to transclusion, noTransition property is on parent's scope
      if (className == 'active' && element.parent() &&
          !element.parent().scope().noTransition) {
        var stopped = false;
        var direction = element.isolateScope().direction;  // <----- FAILS here
        var directionClass = direction == 'next' ? 'left' : 'right

[rvanbaalen]

Can you add a plunkr so we can reproduce and debug this ourselves?

[ScottFred]

We are preparing for a demo and so I may not be able to do this for a few days, but I'll try to get you something.

[rvanbaalen]

Smells like a ngAnimate issue. ngAnimate should be added separately to your project.

[iorlas]

Sooo... what's a solution here?

[rvanbaalen]

@iorlas There is no solution since @ScottFred didn't post a plunkr for us to reproduce the problem yet. When he does, we're able to check what's wrong and draw a conclusion. But it seems like, like I've said in my last comment, you should just include angular-animate in your project.

[iorlas]

@rvanbaalen sadness ;_;
I'll try to make plnkr in spare time, but I'm not sure right now how to isolate problematic code part.
Btw, angular-animate is included in project, since its function mentioned in error traceback. But it is definitely something wrong with animation API in ng13, since it was reworked in ng13, I'm not sure.

[infoTrainingym]

Here a plunker with error:

Version 1.3.16 angular
http://plnkr.co/edit/aVohFEpxBTlcQYG9cXhE?p=preview

Version 1.4.0 angular

http://plnkr.co/edit/Xq5UfcGdUZX1HITYE3UJ?p=preview

Both with angular-ui 0.13.0
Hope this help

[infoTrainingym]

See console log erros

The error is throw when there is more than one element with a class 'item' and this change.

The error doesnt happend when element has no class 'item'.

The thing is this animation '.item' from carousel code

 .animation('.item', [
         '$animate',
 function ($animate) {
  return {
    beforeAddClass: function (element, className, done) {
      // Due to transclusion, noTransition property is on parent's scope
      if (className == 'active' && element.parent() &&
          !element.parent().scope().noTransition) {
        var stopped = false;
        var direction = element.isolateScope().direction;
        var directionClass = direction == 'next' ? 'left' : 'right';
        element.addClass(direction);
        $animate.addClass(element, directionClass).then(function () {
          if (!stopped) {
            element.removeClass(directionClass + ' ' + direction);
          }
          done();
        });

        return function () {
          stopped = true;
        };
      }
      done();
    },

The other thing is

scope.$watch('active', function(active) {
     if (active) {
        carouselCtrl.select(scope);
      }
   });

in the carousel directive. the active class i add, trigger the watcher. So combination .item with .active with ng-animate with too generic carousel'selector .item, is the error.

PD. I really sorry with my english level.

[infoTrainingym]

Hi,

@rvanbaalen, @iorlas

Any advice or how to deal with this issue? is another thing the error?

regards,

[Julink-eth]

Hello,

is there any news about this error ?

Thanks.

[ncknt]

Hi,

I ran into the same bug. It looks like the issue is that the ".item" animation tries to access an isolate scope which is defined through the carousel directive (line 342). My code (and the plunkr above) doesn’t use the carousel directive because I just want to use the bootstrap CSS.

So in short, it happens when you try to use .item elements without the carousel directive.

Ideally the animation would be changed so it’d still work if the “.item” has no carousel parent.

In the meantime, you could:

1. use a custom build without carousel (I won’t because of Separate bower packages for modules bootstrap-bower#18). That is if you don't use carousel somewhere else in your code.
   or
2. rename “item” in the bootstrap CSS and in your code.

[wesleycho]

The carousel should work properly in 1.3 and 1.4 in master with ngAnimate.

Closing this as old.