AngularJS：ng-if plus ng-include throws TypeError：无法调用null的方法'insertBefore' [英] AngularJS: ng-if plus ng-include throws TypeError: Cannot call method 'insertBefore' of null

问题描述

我正在使用 Ionic Framework （版本v1.0.0-beta.11）编写应用程序，但我相信这个问题与潜在的AngularJS（版本v1.2.17）相关。

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).

使用 ng-if 和 ng-include 在同一个元素中。当模型中 ng-if 的条件发生变化时，我收到以下错误（在Chrome和Android中均已测试）：

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) 

我在基于Ionic入门项目的简单项目中解决了这个问题（ ionic start [PATH] tabs ）。以下是代码： http://plnkr.co/edit/CczR5NgFLqR143jQJ08C?p=preview

我挖掘错误，发现抛出错误的函数是之后：function（element，newElement）{... 。

打印出传递函数的参数，元素是一个 [object Comment] 内容<！ - ngInclude： - > 和 newElement 是 [[object HTMLDivElement]] 。

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]].

我读过这里两个指令 ng-if 和 ng-include 可以合并自Angular 1.2.2。

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

有没有人遇到过这个问题？是否有任何已知的修复（除了将 ng-if 移动到父元素之外）？。

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

谢谢提前，

  拉法。

Thanks in advance,
  Rafa.

推荐答案

两者 ng-if 和 ng-include 排队等待执行， ng-if 排名更高优先级因此首先运行。如果表达式为false，则 ng-if 删除该元素，但不取消 ng-include 运行。由于元素被删除， ng-include 无法将加载的内容注入元素中，并且您收到此错误。

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.

您可以考虑在 ng-include 中添加表达式，然后删除 ng-if 。如果表达式返回一个空字符串， ng-include 将不会尝试加载任何内容。

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.

分叉你的plunkr和在2秒后加载内容： http://plnkr.co/edit/oTnJ0bTlMBD7yrUmPloq?p=preview

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

加价

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

控制器

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

这篇关于AngularJS：ng-if plus ng-include throws TypeError：无法调用null的方法'insertBefore'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！