嵌套的 transclude 指令在错误的位置呈现内部 transcluded 内容

Question

我有一个 myList 指令，它包含了它的内容。当我尝试将一个 <my-list> 元素嵌套在另一个 <my-list> 中时，就会出现问题。

JS Fiddle: http://jsfiddle.net/fqj5svhn/

指令：

var MyListDirective = (function () {
    function MyListDirective() {
        this.restrict = 'E';
        this.replace = true;
        this.transclude = true;
        this.scope = {
            myListType: '='
        };
        this.controller = function () {
            this.classes = 'my-class';
        };
        this.controllerAs = 'myList';
        this.bindToController = true;
        this.template = '<ul ng-class="myList.classes" ng-transclude></ul>';
    }
    return MyListDirective;
})();
angular.module('myApp', []).directive('myList', function () {
    return new MyListDirective();
});

指令的用法示例：

<div ng-app="myApp">
    <my-list my-list-type="'someType'">
        <li>foo</li>
        <li>bar</li>
        <li>
            <my-list my-list-type="'anotherType'">
                <li>cats</li>
                <li>dogs</li>
            </my-list>
        </li>
    </my-list>
</div>

渲染的内容：

<div ng-app="myApp" class="ng-scope">
    <ul ng-class="myList.classes" ng-transclude="" my-list-type="'someType'" class="ng-isolate-scope my-class">
        <li class="ng-scope">foo</li>
        <li class="ng-scope">bar</li>
        <li class="ng-scope">
            <ul ng-class="myList.classes" ng-transclude="" my-list-type="'anotherType'" class="ng-isolate-scope my-class">
            </ul>
        </li>
        <li class="ng-scope">cats</li>
        <li class="ng-scope">dogs</li>
    </ul>
</div>

如您所见，内部 myList 中的列表项似乎被外部 myList 嵌入。我想要发生的事情：

<div ng-app="myApp" class="ng-scope">
    <ul ng-class="myList.classes" ng-transclude="" my-list-type="'someType'" class="ng-isolate-scope my-class">
        <li class="ng-scope">foo</li>
        <li class="ng-scope">bar</li>
        <li class="ng-scope">
            <ul ng-class="myList.classes" ng-transclude="" my-list-type="'anotherType'" class="ng-isolate-scope my-class">
                <li class="ng-scope">cats</li>
                <li class="ng-scope">dogs</li>
            </ul>
        </li>
    </ul>
</div>

建议？

Answer 1

发生这种情况是因为当浏览器呈现页面时，它希望 <li> 在 <ul> 内，但你的情况是在 <my-list> 内，这是一个无效标记。所有这些事情都发生在 Angular 引导程序和运行指令之前。当标记无效时，您无法预测浏览器将如何解释您的标记，在这种特殊情况下，它会将 <li> 推到一起。

在这个 fiddle 中，我将 <ul> 和 <li> 替换为 <div>，这对嵌套没有任何要求，并且嵌入工作得很好。

嵌套的 transclude 指令在错误的位置呈现内部 transcluded 内容

Nested transclude directive renders inner transcluded content in wrong place

javascript

angularjs

angularjs-directive

angularjs-ng-transclude