Question

我有一个myList指令，用于转换它的内容。当我尝试将<my-list>元素嵌套在另一个<my-list>内时，会出现此问题。

指令：

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 bootstraps并运行指令之前。您无法预测浏览器在标记无效时如何解释标记，在这种特殊情况下，它会将<li>推出为一起。

在此fiddle我已将<ul>和<li>替换为<div>，其中没有任何嵌套要求，并且转换工作正常。< / p>

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

1 个答案: