角UI引导酥料饼添加一个关闭按钮 [英] Angular UI Bootstrap Popover adding a close button
问题描述
我有以下弹出,并尝试添加一个关闭按钮可以关闭它。
I have the following pop-up and trying to add a close button to be able to close it.
.directive("popoverHtmlUnsafePopup", function () {
'use strict';
return {
restrict: "EA",
replace: true,
scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&", manualHide: '&' },
templateUrl: "views/popover/popover-html-unsafe-popup.html"
};
})
.directive("popoverHtmlUnsafe", [ '$compile', '$timeout', '$parse', '$window',"$tooltip", function ($compile, $timeout, $parse, $window, $tooltip) {
'use strict';
return $tooltip("popoverHtmlUnsafe", "popover", "click");
}]);
<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" bind-html-unsafe="content">
</div>
<button type="button" class="close" popover-trigger="close">×</button>
</div>
</div>
只是不知道叫什么事件或功能
Just not sure what event or function to call on
<button type="button" class="close" popover-trigger="close">×</button>
要能够关闭弹出
推荐答案
陶然成问题,这个使用提示另一个项目。我最终按照 Tooltip.js <一些模式/ A>
Ran into issue with this on another project using tooltip. I ended up following some of the patterns in Tooltip.js
通过使用$编译和新的子范围,您可以自定义这个弹出怎么过,你认为合适的。
By using $compile and a new child scope you can customize this popup how ever you see fit.
.directive('popover2',['$parse', '$compile','$log','$templateCache','$position',
function ($parse,$compile,$log,$templateCache,$position ) {
function link(scope, element, attrs) {
var popupScope = scope.$new(false);
var html = $templateCache.get('views/popover/popover-html-unsafe-popup.html').trim();
var template = angular.element(html)
var popupLinkFn = $compile(template);
var popup = popupLinkFn(popupScope);
popupScope.isOpen = false;
popupScope.content = attrs['popover2'];
var position = function(){
var ttPosition = $position.positionElements(element, popup, scope.placement, false);
ttPosition.top += 'px';
ttPosition.left +='px';
popup.css(ttPosition);
};
popupScope.setOpen = function(val) {
popupScope.isOpen = val;
popup.css({display: popupScope.isOpen ? 'block' :'none' });
position();
// call twice, same as tooltip.js
position();
};
var cleanup = element.on('click',function(event){
popupScope.setOpen(!popupScope.isOpen);
});
element.after(popup);
element.on('$destroy',cleanup);
}
return {
replace:false,
link:link,
scope: {title: "@", placement: "@",},
};
}
]);
此指令将允许您展示的基础上的一个按钮弹出,然后有一个贴心的功能。您可以扩展显示逻辑你曾经认为合适的。我在过去也采用有效的形式成功。
This directive will allow you to show a popup based on a button and then have a close function. You can extend the show logic how ever you see fit. I have used form valid successfully in the past also.
这篇关于角UI引导酥料饼添加一个关闭按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!