问题描述
我正在使用(版本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
)。以下是代码:两个指令 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秒后加载内容:
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'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!