我有以下弹出窗口并尝试添加关闭按钮以便能够关闭它.
.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>
<button type="button" class="close" popover-trigger="close">×</button>
能够关闭弹出窗口
使用工具提示在另一个项目中遇到此问题.我最终在
Tooltip.js中遵循了一些模式
通过使用$compile和一个新的子范围,您可以根据自己的需要自定义此弹出窗口.
.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: "@",},};
}
]);
