你好,我正在努力创建一个基于angular bootstrap Modal指令的通用确认指令。
我找不到一种方法来将我的内容包含在用于模态构造的ng模板中,因为ng-transclude
指令没有被评估,因为它是执行$modal.open()
:时随后加载的ng-template
的一部分
index.html(指令插入):
<confirm-popup
is-open="openConfirmation"
on-confirm="onPopupConfirmed()"
on-cancel="onPopupCanceled()"
>
Are you sure ? (modal #{{index}})
confirmPopup.html(指令模板):
<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,我只在点击"open confirm modal #2
"按钮时等待看到"Are you sure ? (modal #2)
"。
ui引导模式仅支持template
或templateUrl
作为指定内容的一种方式。无论内容是如何检索的,它都是根据$modal
(或者更确切地说,内部$modalStack
)服务提供的范围进行编译和链接的。
所以,至少,像那样,没有办法提供交叉。
一种方法是嵌入一个占位符指令,该指令将附加transcluded DOM,但由于transcludedDOM来自不同于模态的位置,因此需要以某种方式将其移交给该占位符指令。您已经将content
作为注入的解析参数。我将在稍微修改的情况下使用它——我将传递实际的DOM,而不是解析后的HTML。
因此,在高层:
.directive("confirmPopupTransclude", function($parse){
return {
link: function(scope, element, attrs){
// could have been done with "=" and isolate scope,
// but avoids an unnecessary $watch
var templateAttr = attrs.confirmPopupTransclude;
var actualTemplateDOM = $parse(templateAttr)(scope);
element.append(actualTemplateDOM);
}
};
})
并且,在openModal
函数中(省略不相关的属性):
function openModal{
$modal.open({
controller: function($scope, content){
$scope.template = content;
// etc...
},
resolve: {
content: function(){
var transcludedContent;
$transclude(function(clone){
transcludedContent = clone;
});
return transcludedContent; // actual linked DOM
},
// etc...
}
最后,在模态的实际模板中:
<div class="modal-body">
<div confirm-popup-transclude="template"></div>
</div>
您的分叉plunker