为什么ngrepeat在nginclude或指令之后不包括元素

我正在从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或inline html）的输出相同。但是，对于指令和NG的测试，NG重复中的最终P元素丢失了。换句话说，这线...

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

..不会进入DOM。我是否错过了NG重复的行为？还是一个错误？

看起来像是用斜杠在开始标签内关闭标签正在引起问题。添加明确的关闭标签将解决问题。

在您的指示示例中：<test />应为<test></test>

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

请参阅此简化的小提琴，无需NG重复即可重现问题，并且带有关闭标签的固定小提琴。

相关内容

最新更新

热门标签：