5

複数のピースを 1 つのディレクティブに変換したいと思います。これが私がどのように設定したかの私の考えです。

<div id="content" class="mainDirective">
    <div class="sub">
        <ul>
            <li>Everyone</li>
            <li>Development (3)</li>
            <li>Marketing</li>
        </ul>
    </div>
    <div class="subButtons">
        <span class="csStIcon add" data-ng-click="addTeam()"></span>
        <span class="csStIcon edit" data-ng-click="editTeam()"></span>
        <span class="csStIcon delete" data-ng-click="deleteTeam()"></span>
    </div>
    <div class="main">
        <table>
            <thead>
                <tr><td>Name</td><td>Last name</td><td>Department</td></tr>
            </thead>
            <tbody>
                <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr>
                <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr>
                <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr>
            </tbody>
        </table>
    </div>
</div>

私のディレクティブ テンプレート:

<div>
    <div class="left">
        <div data-ng-multi-transclude="sub"></div>
        <div class="bottomOptions">
            <span class="csStIcon collapse"></span>
            <div data-ng-multi-transclude="subButtons"></div>
        </div>
    </div>
    <div class="right">
        <div data-ng-multi-transclude="main"></div>
    </div>
</div>

そして最終的な出力：

<div>
    <div class="left">
        <div class="sub">
            <ul>
                <li>Everyone</li>
                <li data-ng-click="loadDepartment()">Development (3)</li>
                <li data-ng-click="loadDepartment()">Marketing</li>
            </ul>
        </div>
        <div class="bottomOptions">
            <span class="csStIcon collapse"></span>
            <div class="subButtons">
                <div class="subButtons">
                    <span class="csStIcon add" data-ng-click="addTeam()"></span>
                    <span class="csStIcon edit" data-ng-click="editTeam()"></span>
                    <span class="csStIcon delete" data-ng-click="deleteTeam()"></span>
                </div>              
            </div>
        </div>
    </div>
    <div class="right">
        <div class="main">
            <table>
                <thead>
                    <tr><td>Name</td><td>Last name</td><td>Department</td></tr>
                </thead>
                <tbody>
                    <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr>
                    <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr>
                    <tr><td>Lorem</td><td>Ipsum</td><td>Development</td></tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

これは角度内で可能ですか?

4

4 に答える 4

1

私もこの機能が必要になったので、 ng-multi-transcludeを書きました。おかしなことに、当時はこの質問を見たことがなく、幸運にも同じ名前でした。

使用法は、質問のスケッチとほぼ同じです。唯一の違いは、nameアトリビュートの代わりにアトリビュートを使用して、埋める「穴」を選択することclassです。

于 2014-08-29T19:53:06.373 に答える