Question

我有一个模板，如下面的标题，正文（ng-transclude），页脚

<div class="wfm-modal">
    <div class="modal-header">
        <button type="button" id="close-button" class="close" ng-click="cancel()" aria-label="Close"
                ng-show="allowClose">
        </button>
        <h3 class="modal-title">{{title}}</h3>
    </div>

    <ng-transclude></ng-transclude>

    <div class="modal-footer">
        <div class="button-row text-right">
            <!-- Save button -->
            <button id="save" type="submit" ng-click="save()" class="btn btn-primary">
                <span ng-if="saveLabel">
                    {{saveLabel}}
                </span>
            </button>
        </div>
    </div>
</div>

正如你所看到的，我有一个wfm-modal，它包含标题体（ng-transclude）和页脚。

我的指示：

app

.directive('wfmModal', function ($window, $timeout, _, $log, $compile, $templateCache) {
    'use strict';


    var link = function (scope, element, attr, controller, transclude) {

        transclude(scope.$parent, function(clone, scope) {
            element.empty();
            element.append(clone);
        });

    };

    return {
        restrict: 'E',
        link: link,
        templateUrl: 'directives/wfmModal/wfmModal.tpl.html',
        replace: true,
        transclude: true,
        scope: {
            title: '=',
            allowClose: '=',
            cancel: '=',
            save: '=',
            saveLabel: '@',

            delete: '='
            //delete: '=',
            //deletePopover: '@'
        }
    };
})

我的问题：当我不添加

时

transclude(scope.$parent, function(clone, scope) {
                element.empty();
                element.append(clone);
            });

链接函数然后身体的范围（ng-transclude的内容）在从页脚（指令）而不是从ng-transclude的代码中完成的保存中为空

当我添加这个transclude（范围，函数......）而没有行：element.empty();然后整个ng-transclude的内容被复制，当我添加element.empty();时，页眉和页脚消失，只显示ng-transculde的内容。

我想在不中断UI的情况下将ng-transclude的范围连接到指令的范围

Answer 1

在指令的链接功能中添加：

link = function (scope, element, attr, controller, transclude) {
  transclude(scope.$parent, function(clone, scope) {
        var el = element.find('.wfmBody');
        el.append(clone);
    });

在html文件而不是ng-transclude中添加：

<div class="wfmBody"></div>

指令包含具有孤立范围的transculde

1 个答案: