Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

TypeError with ngAnimate #6205

Closed
mayanklahiri opened this issue Feb 10, 2014 · 7 comments
Closed

TypeError with ngAnimate #6205

mayanklahiri opened this issue Feb 10, 2014 · 7 comments

Comments

@mayanklahiri
Copy link

Hi, I'm using the latest Angular 1.2 head at Google (I'm lahiri@). I occasionally get the following error when I've injected ngAnimate into my app -- without actually using it. The ng-animate directive isn't invoked anywhere, and I don't have any CSS transitions. Removing ngAnimate from my app's module dependencies gets rid of the error.

TypeError: Cannot call method 'querySelectorAll' of undefined
    at cancelChildAnimations (http://localhost:8080/dev/js_deps.js:426:92)
    at Object.leave (http://localhost:8080/dev/js_deps.js:414:227)
    at ngRepeatAction (http://localhost:8080/dev/js_deps.js:345:403)
    at Object.$watchCollectionAction [as fn] (http://localhost:8080/dev/js_deps.js:253:80)
    at Scope.$digest (http://localhost:8080/dev/js_deps.js:254:472)
    at Scope.$apply (http://localhost:8080/dev/js_deps.js:258:425)
    at HTMLAnchorElement.<anonymous> (http://localhost:8080/dev/js_deps.js:333:86)
    at http://localhost:8080/dev/js_deps.js:63:60
    at forEach (http://localhost:8080/dev/js_deps.js:11:71)
    at HTMLAnchorElement.eventHandler (http://localhost:8080/dev/js_deps.js:63:18)
@IgorMinar
Copy link
Contributor

@matsko can you look into this please?

@IgorMinar IgorMinar added this to the Backlog milestone Feb 10, 2014
@Francisc
Copy link

This happens when an element with ng-repeat has an ng-if directive from what I've seen.

e.g. <div ng-repeat="item in data" ng-if="item.quantity>0"></div>

This is because here, extractElementNode(element) returns undefined when element is an HTML comment node (<!-- ngIf: item.quantity>0 -->), then undefined.querySelectorAll(...) throws the error.

var node = extractElementNode(element);

@Francisc
Copy link

I would have extractElementNode() return an empty array rather than check if node is truthy.
Or if you prefer the if(node) check, at least make sure extractElementNode() intentionally returns null instead leaving it to the JS engine to return undefined.

I will make a pull request for that if you prefer my approach. Please let me know.

@d4rkr00t
Copy link

Method returns a html node or undefined not array, i can check if node === undefined, but i see no reason.

@Francisc
Copy link

You're right, sorry. I confused it with something else. The method returns HTML node elements.
However, I would return null from extractElementNode() to indicate intention. JavaScript usually uses undefined.

@kmlx
Copy link

kmlx commented Feb 18, 2014

+1

d4rkr00t pushed a commit to d4rkr00t/angular.js that referenced this issue Feb 19, 2014
…ncelChildAnimations

When element with ng-repeat has an ng-if directive and user try to remove any item from array used for ng-repeat, he gets error "TypeError Cannot call method 'querySelectorAll' of undefined". This happens because in method cancelChildAnimations of ngAnimate directive not checked value returned from extractElementNode(element) method.
Fix add a validation for result of extractElementNode(element) method.

Closes angular#6205
d4rkr00t pushed a commit to d4rkr00t/angular.js that referenced this issue Feb 19, 2014
…ncelChildAnimations

When element with ng-repeat has an ng-if directive and user try to remove any item from array used for ng-repeat, he gets error "TypeError Cannot call method 'querySelectorAll' of undefined". This happens because in method cancelChildAnimations of ngAnimate directive not checked value returned from extractElementNode(element) method.
Fix add a validation for result of extractElementNode(element) method.

Closes angular#6205
matsko pushed a commit to matsko/angular.js that referenced this issue Feb 21, 2014
…ncelChildAnimations

When element with ng-repeat has an ng-if directive and user try to remove any item from array used for ng-repeat, he gets error "TypeError Cannot call method 'querySelectorAll' of undefined". This happens because in method cancelChildAnimations of ngAnimate directive not checked value returned from extractElementNode(element) method.
Fix add a validation for result of extractElementNode(element) method.

Closes angular#6205
matsko pushed a commit to matsko/angular.js that referenced this issue Feb 26, 2014
…ncelChildAnimations

When an element containing both ng-repeat and ng-if directives attempts to remove any items from
the repeat collection, the following error is thrown: "TypeError Cannot call method 'querySelectorAll'
of undefined".  This happens because the cancelChildAnimations code naively belives that the jqLite
object always has an element node within it. The fix in this commit addresses to securely check to see
if a node was properly extracted before any child elements are inspected.

Closes angular#6205
@matsko matsko closed this as completed in c914cd9 Feb 26, 2014
@matsko
Copy link
Contributor

matsko commented Feb 26, 2014

Landed as c914cd9

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.