Директива содержит transculde с изолированной областью применения

0

У меня есть шаблон как следующий заголовок, тело (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-модаль, который содержит тело заголовка (которое 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.

Я хочу связать область ng-transclude с областью действия без нарушения пользовательского интерфейса

Теги:
angularjs-directive

1 ответ

0

В функции директивной ссылки добавьте:

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>

Ещё вопросы

Сообщество Overcoder
Наверх
Меню