Question

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

在同一元素中同时使用ng-if和ng-include时出现问题。当模型中ng-if的条件发生变化时，我会收到以下错误（在Chrome和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

我挖掘错误，发现抛出错误的函数是after: function(element, newElement) {... 打印出通过该函数的参数，element是[object Comment]，内容为，newElement为[[object HTMLDivElement]]。

我读了here，因为Angular 1.2.2可以合并指令ng-if和ng-include。

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

提前致谢，
拉法。

Answer 1

ng-if和ng-include都排队等待执行，ng-if具有更高的优先级，因此它首先运行。如果表达式为false，则ng-if会删除该元素，但不会取消ng-include的运行。由于该元素已被删除，ng-include无法将加载的内容注入元素，因此会出现此错误。

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

分叉您的plunkr并在2秒后加载内容：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：无法调用方法＆＃39; insertBefore＆＃39;为null

1 个答案: