注意版本不同,使用outclick得版本大于0.14.3
// product info tip
$scope.openedTooltip = false;
$scope.productInfoTooltip = function (id, ean, language) {
if ($scope.openedTooltip != ean) {
$scope.openedTooltip = false;
}
var url = '/approvalCMS/product/viewTip?shop_id=' + $scope.shopId +
'&product_id=' + id + '&ean='+ ean + '&language='+ language;
$scope.productHtmlTooltip = $sce.trustAsHtml(
'<iframe frameborder="0" onload="loadProductInfoTip()" ' +
' name="productInfoTip" width="' + $window.innerWidth/2 +
'" height="' + $window.innerHeight/2 + '" src="' + url + '"></iframe>'
);
$scope.openedTooltip =($scope.openedTooltip != false ? false : ean);
};
<td tooltip-is-open="openedTooltip == {{value.ean}}" tooltip-trigger="none" tooltip-placement="right" tooltip-class="product-view-tooltip"
uib-tooltip-html="productHtmlTooltip" tooltip-append-to-body="true"
ng-mouseenter="productInfoTooltip(value._id, value.ean, value.language)"
ng-click="productInfo(value._id, value.ean, value.language, false)"
style="cursor:pointer"><img ng-src="{{value.images.main_white}}" height="60px" width="60px"/></td>
问题点:当打开的是一个iframe,有滑动的,需要看完,划出才关闭.
<script>
loadProductInfoTip = function() {
$("iframe[name='productInfoTip']").mouseleave(function() {
$(".product-view-tooltip .tooltip-arrow, .product-view-tooltip .tooltip-inner").hide();
});
};
</script>
这样写保证火狐和谷歌浏览器的兼容性.