javascript - 嵌套的 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> ，它对嵌套没有任何要求，并且嵌入工作得很好。