html - 单独的html的多次嵌入

Question

我想将多个部分转换为一个指令。这是我如何设置它的想法。

<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>

这可能在角度范围内吗？

Answer 1

我最终也需要这个功能，所以我写了ng-multi-transclude - 有趣的是，我当时还没有看到这个问题，只是幸运地得到了同一个名字。

用法几乎与您的问题草图完全相同；唯一的区别是您使用name属性来选择要填充的“洞”而不是class属性。

Answer 2

这已在 angular 1.5 中添加

http://angularjs.blogspot.ca/2016/02/angular-150-ennoblement-facilitation.html

Answer 3

我使用 transclude 函数提出了这个指令：

app.directive('mainDirective', function($compile) {
    var template = ['<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>'].join('\n');
    return {
        restrict: 'C',
        transclude: true,
        template: template,
        link: function(scope, element, attr, model, transclude) {
            var places = element.find('[data-ng-multi-transclude]');
            console.log(element);
            places.each(function() {
                var self = $(this);
                var class_ = self.data('ng-multi-transclude');
                transclude(scope.$new(), function(clone, scope) {
                    var item = clone.closest('.' + class_);
                    $compile(item)(scope).appendTo(self);
                });
            });
        }
    };
});

我使用了编译，所以你可以在你的嵌入代码中使用角度。

如果你使用这个：

self.replaceWith($compile(item)(scope));

你不会得到那些带有data-ng-multi-transclude属性的原始包装器 div。

您还需要包含 jQuery（总是在 Angular 之前，因为否则您会得到 jQLite）。

Answer 4

我在编写的组件中使用了多个“嵌入”。在实践中，它只是嵌套指令，但它们完成了工作：https ://github.com/AlexCppns/ac-fancy-input

更具体地说，请查看以下文件：

https://github.com/AlexCppns/ac-fancy-input/blob/master/src/ac-fancy-input/directives/fancy-input.js