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