Здравствуйте, я изо всех сил пытаюсь создать общую директиву подтверждения на основе модальной директивы angular-bootstrap.
Я не могу найти способ включить свой контент в шаблон ng, используемый для модальной конструкции, потому что директива ng-transclude
не оценивается, поскольку она является частью ng-template
, загружаемой впоследствии при выполнении $modal.open()
:
index.html (вставка директивы):
<confirm-popup
is-open="openConfirmation"
on-confirm="onPopupConfirmed()"
on-cancel="onPopupCanceled()"
>
Are you sure ? (modal #{{index}})
confirmPopup.html (directive template) :
<script type="text/ng-template" id="confirmModalTemplate.html">
<div>
<div class="modal-header">
<h3>Confirm ?</h3>
</div>
<div class="modal-body">
{{directiveTranscludedContent}} // ng-transclude do not work here
</div>
<div class="modal-footer">
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
<button class="btn btn-primary" ng-click="ok()">Validate</button>
</div>
</div>
</script>
confirmPopup.js (директива JS):
.directive('confirmPopup', [
function() {
return {
templateUrl: 'confirmPopup.html',
restrict: 'EA',
replace: true,
transclude: true,
scope: {
isOpen: '=',
confirm: "&onConfirm",
cancel: "&onCancel"
},
controller: ['$scope', '$element', '$modal', '$transclude', '$compile', function($scope, $element, $modal, $transclude, $compile) {
// watching isOpen attribute to dispay modal when needed
$scope.$watch(
function() {
return $scope.isOpen;
},
function(newValue) {
if (newValue === true) {
openModal();
} else {
// if a modal is already dispayed : the modal must be canceled/confirmed by the user
// else (if no modal is dispayed), then do nothing
}
}
);
// open modal function
// create / register ok/cancel callbacks
// and open modal
// all on one shot
function openModal() {
$modal.open({
templateUrl: 'confirmModalTemplate.html',
controller: ['$scope', '$modalInstance', 'content', function($scope, $modalInstance, content) {
$scope.directiveTranscludedContent = content;
$scope.ok = function() {
$modalInstance.close();
};
$scope.cancel = function() {
$modalInstance.dismiss();
};
}],
resolve: {
content: function() {
return $transclude().html();
//return $compile($transclude().contents())($scope);
},
}
})
.result.then(
// modal has been validated
function() {
$scope.confirm();
},
// modal has been dismissed
function() {
if ($scope.cancel) {
$scope.cancel();
}
}
);
};
}]
};
}
]);
Если это недостаточно ясно, см. этот PLUNKER, где я жду, чтобы увидеть "Are you sure ? (modal #2)
" только при нажатии на кнопку "open confirm modal #2
".