AngularJS: ng-if plus ng-include throws TypeError: Cannot call method 'insertBefore' of null

Question

I'm writing an app using Ionic Framework (version v1.0.0-beta.11), but I believe this question is rather related with the underlying AngularJS (version v1.2.17).

I have a problem when using ng-if and ng-include together in the same element. When the condition of the ng-if changes in the model, I get the following error (tested both in Chrome and Android):

TypeError: Cannot call method 'insertBefore' of null
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:10843:14
    at forEach (http://localhost:8100/lib/ionic/js/ionic.bundle.js:8187:18)
    at forEach.after (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10842:5)
    at Object.JQLite.(anonymous function) [as after] (http://localhost:8100/lib/ionic/js/ionic.bundle.js:10913:17)
    at Object.enter (http://localhost:8100/lib/ionic/js/ionic.bundle.js:12015:17)
    at Object.enter (http://localhost:8100/lib/ionic/js/ionic.bundle.js:30107:21)
    at http://localhost:8100/lib/ionic/js/ionic.bundle.js:27441:26
    at publicLinkFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13779:29)
    at boundTranscludeFn (http://localhost:8100/lib/ionic/js/ionic.bundle.js:13894:21)
    at controllersBoundTransclude (http://localhost:8100/lib/ionic/js/ionic.bundle.js:14492:18)

I've isolated the issue in a simple project based on the Ionic starter project (ionic start [PATH] tabs). Here's the code: http://plnkr.co/edit/CczR5NgFLqR143jQJ08C?p=preview

I dug into the error and found that the function that is throwing the error is after: function(element, newElement) {....
Printing out the arguments passed the function, element is an [object Comment] with contents  and newElement is an [[object HTMLDivElement]].

I read here that both directives ng-if and ng-include can be combined since Angular 1.2.2.

Has anyone experienced this issue?. Is there any known fix (other than moving the ng-if to a parent element)?.

Thanks in advance,
Rafa.

Jeremy Wilken · Accepted Answer · 2014-09-04 19:59:44Z

3

Both ng-if and ng-include are queued up to execute, and ng-if has a higher priority so it runs first. If the expression is false, then ng-if removes the element, but doesn't cancel the ng-include from running. Since the element is removed, ng-include is unable to inject the loaded content into the element and you get this error.

You could consider having an expression in ng-include and remove the ng-if. If the expression returns an empty string, ng-include will not try to load anything.

Forked your plunkr and have the content load after 2 seconds: http://plnkr.co/edit/oTnJ0bTlMBD7yrUmPloq?p=preview

Markup

<ng-include src="source"></ng-include>

Controller

// In the controller, check
$timeout(function () {
  $scope.source = 'templates/Nocontent.html';
}, 2000);

answered Sep 4, 2014 at 19:59

Jeremy Wilken

6,96424 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

rbarriuso Over a year ago

Just for the record, if the condition is a different variable in the model, "<div ng-include src="!content ? 'templates/mytemplate.html' : null"></div> works fine.

rbarriuso Over a year ago

Also be aware that even if the div element is not appended when the ng-include condition is false, any associated controller (using ng-controller) will be invoked.

rbarriuso Over a year ago

Actually the controllers are called but with an empty $scope

rbarriuso Over a year ago

If using ng-controller together with a conditional ng-include, note that the controller will be run only once: stackoverflow.com/a/26006589/2050333

Collectives™ on Stack Overflow

AngularJS: ng-if plus ng-include throws TypeError: Cannot call method 'insertBefore' of null

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related