在另一个使用工具提示的项目中遇到了这个问题。我最终遵循了一些模式工具提示.js https://github.com/angular-ui/bootstrap/blob/master/src/tooltip/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: "@", placement: "@",},
};
}
]);
JSFiddle http://jsfiddle.net/4z8r6uLL/32/
该指令将允许您显示基于按钮的弹出窗口,然后具有关闭功能。您可以按照您认为合适的方式扩展显示逻辑。我过去也成功地使用过有效的表单。