1

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 <!-- ngInclude: --> 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.

Community
  • 1
  • 1
rbarriuso
  • 787
  • 8
  • 30

1 Answers1

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);
Jeremy Wilken
  • 6,965
  • 22
  • 21
  • Just for the record, if the condition is a different variable in the model, `"
    ` works fine.     – rbarriuso Sep 05 '14 at 13:17
  • 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 Sep 05 '14 at 13:30
  • Actually the controllers are called but with an empty `$scope` – rbarriuso Sep 05 '14 at 13:46
  • If using `ng-controller` together with a conditional `ng-include`, note that the controller will be run only once: http://stackoverflow.com/a/26006589/2050333 – rbarriuso Sep 24 '14 at 00:19