3

コンテンツをトランスクルージョンするmyListディレクティブがあります。<my-list>この問題は、要素を別の要素内にネストしようとすると発生し<my-list>ます。

JS フィドル: 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>

提案？

4

1 に答える 1

2

これは、ブラウザがページをレンダリングするとき<li>に内部にあると予想されるため<ul>に発生していますが、あなたの場合は内部<my-list>にあり、無効なマークアップです。これらはすべて、Angular のブートストラップと実行ディレクティブの前に発生します。マークアップが無効な場合にブラウザがそのマークアップをどのように解釈するかを予測する方法はありません<li>。

このフィドル<ul>では、 and<li>をに置き換えました<div>。これにはネストの要件がなく、トランスクルージョンは問題なく機能します。

于 2015-06-29T09:31:03.560 に答える