Angularjs 为什么ngRepeat不在ngInclude或directive之后包含元素？_Angularjs_Angularjs Directive_Angularjs Ng Repeat

Angularjs 为什么ngRepeat不在ngInclude或directive之后包含元素？

angularjs

Angularjs 为什么ngRepeat不在ngInclude或directive之后包含元素？,angularjs,angularjs-directive,angularjs-ng-repeat,Angularjs,Angularjs Directive,Angularjs Ng Repeat,我在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

我在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>


指令测试


还有一件事


使用ng的测试包括


还有一件事


使用内联开关进行测试


你好
约翰尼男孩
玛丽娃娃
!
还有一件事


var-app=angular.module（“app”，[]）；
应用指令（“测试”，功能（）{
返回{
限制：“E”，
范围：假，
templateUrl:function（）{return“test.html”}，
替换：正确，
链接：功能（范围、要素、属性）{
日志（范围、元素、属性）；
}
}
});
应用程序控制器（“ctrl”，函数（$scope）{
$scope.list=[{name:“John”}，{name:“Mary”}]；
});

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重复中的最终p元素缺失。换句话说，这一行

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

还有一件事

…没有进入DOM。我是否遗漏了ng repeat的行为？还是一个bug？

似乎是用斜杠关闭开始标记内的标记导致了问题。添加一个明确的结束标记将解决这个问题

在指令示例中：

应该是

在您的ng包含示例中：

应该是

请参阅此页，在不重复ng的情况下，使用结束标签复制问题。

谢谢！通过显式结束标记，一切似乎都按预期进行。“真不敢相信我没想到会去尝试。”格洛皮谢谢你指出这一点，rom99，你为什么不把这标记为正确答案？