gpt4 book ai didi

angularjs - 为什么 ngRepeat 不包含 ngInclude 或指令之后的元素?

转载 作者:行者123 更新时间:2023-12-02 22:51:08 25 4
gpt4 key购买 nike

我遇到了 ngRepeat 指令的一些意外行为。这是一个非常简单的示例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="app">
<body ng-controller="ctrl">

<h1>test with directive</h1>
<ul>
<li ng-repeat="item in list">
<div>
<test />
<p>And another thing...</p>
</div>
</li>
</ul>

<h1>test with ng-include</h1>
<ul>
<li ng-repeat="item in list">
<ng-include src="'test.html'" />
<p>And another thing...</p>
</li>
</ul>

<h1>test with inline switch</h1>
<ul>
<li ng-repeat="item in list">
Hello,
<div ng-switch="item.name">
<div ng-switch-when="John">Johnny-boy</div>
<div ng-switch-when="Mary">Mary-doll</div>
</div>
!
<p>And another thing...</p>
</li>
</ul>

<script src="angular.js" type="text/javascript"></script>
<script type="text/javascript">

var app = angular.module("app", []);

app.directive("test", function () {
return {
restrict: "E",
scope: false,
templateUrl: function () { return "test.html" },
replace: true,
link: function (scope, elem, attrs) {
console.log(scope, elem, attrs);
}
}
});

app.controller("ctrl", function ($scope) {
$scope.list = [ { name: "John" }, { name: "Mary" } ];
});

</script>
</body>
</html>

test.html 文件如下所示:

<div>
Hello,
<div ng-switch="item.name">
<div ng-switch-when="John">Johnny-boy</div>
<div ng-switch-when="Mary">Mary-doll</div>
</div>
!
<hr/>
</div>

我期望每个测试都有相同的输出(使用指令、ng-include 或内联 html)。然而,对于指令和 ng-include 测试,ng-repeat 中的最后一个 p 元素丢失了。换句话说,这一行...

<p>And another thing...</p>

..不会将其放入 DOM 中。我是否遗漏了 ng-repeat 行为的一些内容?或者这是一个错误?

最佳答案

看起来用斜杠关闭开始标签内的标签是导致问题的原因。添加显式结束标记将解决该问题。

在您的指令示例中:<test />应该是<test></test>

在您的 ng-include 示例中:<ng-include src="'test.html'" />应该是<ng-include src="'test.html'"></ng-include>

<小时/>

查看此simplified fiddle在没有 ng-repeat 和 this fixed fiddle 的情况下重现问题带有结束标签。

关于angularjs - 为什么 ngRepeat 不包含 ngInclude 或指令之后的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21463494/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com