指令包含具有隔离范围的 transculde答案

【问题标题】：Directive contains transculde with isolated scope指令包含具有隔离范围的 transculde
【发布时间】：2016-05-03 12:47:12
【问题描述】：

我有一个模板如下页眉、正文（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(scope, function...) 而不添加行时：element.empty(); 然后主体 ng-transclude 的内容被复制，当我添加element.empty(); 时，页眉和页脚都消失了，只显示 ng-transculde 的内容。

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

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案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>

【讨论】：