AngularJS is throwing "TypeError: Cannot read property 'childNodes' of undefined" when using DOM elements that trigger directives in ng-view #5069

manuel-josupeit-walter-aleri · 2013-11-21T13:46:22Z

Dear angular guys,

after upgrading AngularJS from version 1.0.8 to 1.2.1 we've encountered an exception being thrown in compositeLinkFn on line 5539:

TypeError: Cannot read property 'childNodes' of undefined
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:5539:36)
    at compositeLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:5539:13)
    at publicLinkFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:5444:30)
    at boundTranscludeFn (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:5555:21)
    at controllersBoundTransclude (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:6145:18)
    at update (http://code.angularjs.org/1.2.1/angular-route.js:838:13)
    at Scope.$broadcast (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:11851:28)
    at http://code.angularjs.org/1.2.1/angular-route.js:549:26
    at wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:10597:81)
    at wrappedCallback (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js:10597:81)

This error seems to occur only when the routing module is in use and tags are nested within the ng-view container. At least one of these tags must also match any angularjs directive (such as a-tags or form-tags).

Reproducable: always
Browsers: Chrome 31, Firefox 25 and IE 10
Operating system: Windows 8.1

Steps to reproduce:

Create a new html file
Add the following content to the newly created file:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html ng-app="test">
<head>
  <title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
  <script type="text/javascript" src="http://code.angularjs.org/1.2.1/angular-route.js"></script>
  <script type="text/javascript">
    angular.module('test', ['ngRoute'])
               .config(['$routeProvider', function($routeProvider) {
                    $routeProvider.when('/', {
                        template: 'Hello world!'
                    });
               }]);
  </script>
</head>
<body>
  <div ng-view>
    <div>
        <a href="#"></a>
    </div>
  </div>
</body>
</html>

Open the file in any browser and watch the console

As soon as the <a>-Tag is removed, the exception disappears. This issue might be related to #2532.

The text was updated successfully, but these errors were encountered:

petebacondarwin · 2013-11-21T14:39:51Z

This seems to be have been introduced by this commit: b7a5449

petebacondarwin · 2013-11-21T14:49:04Z

The exception is being thrown on this line: https://github.com/angular/angular.js/blob/master/src/ng/compile.js#L935

petebacondarwin · 2013-11-21T14:50:19Z

It seems that node is undefined because stableNodeList and linkFns have got out of sync.

petebacondarwin · 2013-11-21T14:51:43Z

It only occurs if the content of the ng-view element contains Angular directives and that these directives are not on the top level nodes of the child contents of the ng-view element.

IgorMinar · 2013-11-21T18:24:26Z

I suspect that ngView used to be terminal directive but now it's not and it is somehow affecting the next compilation.

I updated the test case and removed it further down to the least amount of nodes in ngView that repro the issue:

<!doctype html>
<html ng-app="test">
<head>
  <title></title>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
  <script type="text/javascript" src="http://code.angularjs.org/1.2.1/angular-route.js"></script>
  <script type="text/javascript">
    angular.module('test', ['ngRoute'])
               .config(['$routeProvider', function($routeProvider) {
                    $routeProvider.when('/', {
                        template: 'Hello world!'
                    });
               }]);
  </script>
</head>
<body>
  <div ng-view>myText<p><a></a></p></div>
</body>
</html>

tbosch · 2013-11-21T19:11:24Z

Here is the same error without routes and ngView with a custom directive

<!doctype html>
<html ng-app="test">
<head>
    <script type="text/javascript" src="../build/angular.js"></script>
    <script type="text/javascript">
        angular.module('test', []).directive('test', function() {
            return {
                restrict: 'ECA',
                transclude: 'element',
                link: function(scope, element, attr, ctrl, transclude) {
                    transclude(scope, function(clone) {
                        element.after(clone);
                        clone.html('<div></div>');
                    });
                }
            };
        });

    </script>
</head>
<body>
<div test>myText<p><a></a></p></div>

</body>
</html>

The crucial thing here is the do clone.html(...). If this is removed the error does not happen. Also, if clone.html() is done outside of the transclude function it works fine.

tbosch · 2013-11-21T19:34:23Z

So we have the following situation:

transclude: 'element" compiles the content of the element.
When ngView calls the transclude(scope, coneAttachFn) function, the following things happen:
1. the element is cloned and then cloneAttachFn is called with the clone.
2. after cloning the element is linked.

The problem exists as ngView changes the element in the cloneAttachFn, i.e. after it is compiled but before it is linked.

The same can be reproduced with the following code snippet:

var injector = angular.injector(['ng']);
injector.invoke(function($compile, $rootScope) {
  var link = $compile('<div>myText<p><a></a></p></div>');
  link($rootScope, function(clone) {
    clone.html('<div></div>');
  });
});

tbosch · 2013-11-21T19:53:20Z

The reason why the example only fails if the html structure is so specific (text-node, outer-node with inner node that has a directive) and not for a html template like <div><a></a> is that the directive a only uses jquery elements, which handle non existing elements well.

If we use a directive that accesses the underlying element directly, we get a corresponding error more easily:

angular.module('test', []).directive('test', function() {
  return {
    link: function(scope, element) {
      element[0].someProp = true;
    }
  };
});

var injector = angular.injector(['ng', 'test']);
injector.invoke(function($compile, $rootScope) {
  var link = $compile('<div><span test></span></div>');
  link($rootScope, function(clone) {
    clone.html('');
  });
});

So to summarize, the problem is that we change the elements in the cloneAttachFn of the link function, and the solution is to not do this there. This means we should change ngView and other directives (e.g. ngIf also adds a comment node during cloneAttachFn) so that they modify the node after the call to $transclude.

…nt with directives. Related to angular#5069

…h directives. Fixes angular#5069

…nt with directives. Related to #5069

…nt with directives. Related to angular#5069

…h directives. Fixes angular#5069

…nt with directives. Related to angular#5069

…h directives. Fixes angular#5069

tomtom87 · 2015-10-21T07:48:08Z

Currently getting this error thrown when trying to use the ng-view directive on a div with no contents, inside of a controller with a ng-route template - angular version 1.4.7 from npm

angular.js:12477 TypeError: Cannot read property 'replace' of undefined
    at Cb (angular.js:11406)
    at hf.a.$get (angular.js:12236)
    at Object.e [as invoke] (angular.js:4478)
    at angular.js:4295
    at d (angular.js:4437)
    at Object.e [as invoke] (angular.js:4469)
    at angular.js:4295
    at d (angular.js:4437)
    at Object.e [as invoke] (angular.js:4469)
    at angular.js:7080

petebacondarwin · 2015-10-22T20:41:13Z

@tomtom87 - can you provide a running example of this (perhaps in a plunker) and create a new issue so that we can investigate?

sector021 · 2016-04-01T11:01:55Z

Help me out from this issue
angular.js:10033 Error: Could not resolve '#' from state 'logIn'
at Object.transitionTo (angular-ui-router.js:3140)
at Object.go (angular-ui-router.js:3068)
at angular-ui-router.js:4181

ebrahim-tadbir · 2016-06-03T22:02:38Z

when using ng-view this happened to me.

just try to use

    $scope.$on('$viewContentLoaded', function() {
    //needed action    
    });

in the controller related to your state.

shirenjiuhao · 2016-12-02T15:15:41Z

<title></title> <style> .box{background:#eee;transition:2s all;position: absolute}

    .box.ng-enter{
        opacity: 0;
    }
    .box.ng-enter-active{
        opacity: 1;
    }
    .box.ng-leave{
        opacity: 1;
    }
    .box.ng-leave-active{
        opacity: 0;
    }
</style>
<script src="js/angular.js"></script>
<script src="//cdn.bootcss.com/ionic/0.9.22-alpha/js/angular/angular-route.min.js"></script>
<script src="//cdn.bootcss.com/ionic/0.9.21-alpha/js/angular/angular-animate.js"></script>

Nokel81 · 2017-05-05T12:12:48Z

This also seems to happen when adding DOM elements by JS ahead of other DOM elements that were defined in HTML.

document.getElementById("canvasParent").insertBefore(canvas, document.getElementById("canvasParent").firstChild);

gkalpak · 2017-05-06T12:07:15Z

@Nokel81, it would be awesome if you could create a demo.

Nokel81 · 2017-05-08T15:53:28Z

https://plnkr.co/edit/Rwoduo3qe6s1WIeb1hO2

Here is a plunker that shows the error, the lines of code to add the canvas is at the bottle of the controller's function

gkalpak · 2017-05-09T07:12:10Z

@Nokel81, I see. This is something different, because you are manipulating the DOM from inside a controller (which is not supported). Note that controllers are instantiated after compilation and before linking. Since linking depends on the state of the DOM during compilation it is a realy bad idea to change the DOM structure inside controllers.

Typically, such manipulation should happen in the post-linking phase (when both the element and all its children have been compiled and linked). If you want to do it from a controller, you should use the $postLink hook (that runs during the post-linking phase). Demo

_{BTW, ngController is no longer a recommended pattern. Modern practices recommend component-based architectures, which (among other things) offer better isolation/modularization.}

ghost assigned IgorMinar Nov 21, 2013

ghost assigned tbosch Nov 21, 2013

tbosch added a commit to tbosch/angular.js that referenced this issue Nov 22, 2013

fix(ngInclude): Don't throw when the ngInclude element contains conte…

b67da6c

…nt with directives. Related to angular#5069

tbosch added a commit to tbosch/angular.js that referenced this issue Nov 22, 2013

fix(ngView): Don't throw when the ngView element contains content wit…

f10935e

…h directives. Fixes angular#5069

tbosch added a commit that referenced this issue Nov 22, 2013

fix(ngInclude): Don't throw when the ngInclude element contains conte…

0a7cbb3

…nt with directives. Related to #5069

tbosch closed this as completed in e6521e7 Nov 22, 2013

jamesdaily pushed a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

fix(ngInclude): Don't throw when the ngInclude element contains conte…

79495ad

…nt with directives. Related to angular#5069

jamesdaily pushed a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

fix(ngView): Don't throw when the ngView element contains content wit…

08b1ac4

…h directives. Fixes angular#5069

jamesdaily pushed a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

fix(ngInclude): Don't throw when the ngInclude element contains conte…

462d709

…nt with directives. Related to angular#5069

jamesdaily pushed a commit to jamesdaily/angular.js that referenced this issue Jan 27, 2014

fix(ngView): Don't throw when the ngView element contains content wit…

d314eee

…h directives. Fixes angular#5069

kfatehi mentioned this issue Jun 11, 2014

angular needs an update? Strider-CD/strider#437

Closed

n9986 mentioned this issue Dec 19, 2014

1.2-beta5 Modal Display Issue mcasimir/mobile-angular-ui#182

Closed

kbhuvana unassigned tbosch Oct 15, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

AngularJS is throwing "TypeError: Cannot read property 'childNodes' of undefined" when using DOM elements that trigger directives in ng-view #5069

AngularJS is throwing "TypeError: Cannot read property 'childNodes' of undefined" when using DOM elements that trigger directives in ng-view #5069

manuel-josupeit-walter-aleri commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

IgorMinar commented Nov 21, 2013

tbosch commented Nov 21, 2013

tbosch commented Nov 21, 2013

tbosch commented Nov 21, 2013

tomtom87 commented Oct 21, 2015

petebacondarwin commented Oct 22, 2015

sector021 commented Apr 1, 2016

ebrahim-tadbir commented Jun 3, 2016 •

edited

Loading

shirenjiuhao commented Dec 2, 2016

Nokel81 commented May 5, 2017

gkalpak commented May 6, 2017

Nokel81 commented May 8, 2017

gkalpak commented May 9, 2017

AngularJS is throwing "TypeError: Cannot read property 'childNodes' of undefined" when using DOM elements that trigger directives in ng-view #5069

AngularJS is throwing "TypeError: Cannot read property 'childNodes' of undefined" when using DOM elements that trigger directives in ng-view #5069

Comments

manuel-josupeit-walter-aleri commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

petebacondarwin commented Nov 21, 2013

IgorMinar commented Nov 21, 2013

tbosch commented Nov 21, 2013

tbosch commented Nov 21, 2013

tbosch commented Nov 21, 2013

tomtom87 commented Oct 21, 2015

petebacondarwin commented Oct 22, 2015

sector021 commented Apr 1, 2016

ebrahim-tadbir commented Jun 3, 2016 • edited Loading

shirenjiuhao commented Dec 2, 2016

Nokel81 commented May 5, 2017

gkalpak commented May 6, 2017

Nokel81 commented May 8, 2017

gkalpak commented May 9, 2017

ebrahim-tadbir commented Jun 3, 2016 •

edited

Loading