通过 tooltip-is-open 属性隐藏工具提示不起作用
Hiding a tooltip via the tooltip-is-open attribute doesn't work
我想显示一个可点击的元素(一个很棒的字体图标),它将一些数据复制到剪贴板中。当发生点击事件时,我还想显示一个工具提示,一旦光标离开(鼠标离开)元素,该提示就会消失。
这个元素是一个指令,因为我在我的应用程序中多次使用它。
复制数据根本不是问题,显示工具提示也不是问题。但是,当鼠标离开 font awesome 图标时,它并没有消失。
为了解决这个问题,首先我将 scope.tooltipIsOpen 设置为 true,正如预期的那样,它默认显示工具提示。
然后我在代码中放了一些$log.info,看值是否更新为false。似乎值已更新。我还检查了事件是否被触发,它们是否被触发了。我假设视图没有更新,所以工具提示仍然显示。我最终尝试将 scope.$apply() 放入 post 函数中,但没有成功。
这是我的指令:
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
注意:ngClipboard 是一种将数据复制到剪贴板的服务。
这是关联的 HTML 模板:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
您有解决此问题的想法或线索吗?
提前致谢,
我设法通过将我的代码包装在 $timeout(); 中来实现它。这是工作代码:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout 确保它在我猜的 $apply 周期内运行。
我想显示一个可点击的元素(一个很棒的字体图标),它将一些数据复制到剪贴板中。当发生点击事件时,我还想显示一个工具提示,一旦光标离开(鼠标离开)元素,该提示就会消失。
这个元素是一个指令,因为我在我的应用程序中多次使用它。
复制数据根本不是问题,显示工具提示也不是问题。但是,当鼠标离开 font awesome 图标时,它并没有消失。
为了解决这个问题,首先我将 scope.tooltipIsOpen 设置为 true,正如预期的那样,它默认显示工具提示。
然后我在代码中放了一些$log.info,看值是否更新为false。似乎值已更新。我还检查了事件是否被触发,它们是否被触发了。我假设视图没有更新,所以工具提示仍然显示。我最终尝试将 scope.$apply() 放入 post 函数中,但没有成功。
这是我的指令:
app.directive('toClipboard',
['$log', 'ngClipboard',
function ($log, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltip hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltip.
element.on('mouseenter', function () {
scope.tooltipIsOpen = false;
});
// Hiding tooltip.
element.on('mouseleave', function () {
scope.tooltipIsOpen = false;
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]);
注意:ngClipboard 是一种将数据复制到剪贴板的服务。
这是关联的 HTML 模板:
<span>
<i class="fa fa-copy clickable"
uib-tooltip="Copied"
tooltip-placement="tooltipPlacement"
tooltip-is-open="tooltipIsOpen"
tooltip-trigger="'click'"
ng-click="copy(clipboardData)"></i>
</span>
您有解决此问题的想法或线索吗?
提前致谢,
我设法通过将我的代码包装在 $timeout(); 中来实现它。这是工作代码:
app.directive('toClipboard',
['$log', '$timeout', 'ngClipboard',
function ($log, $timeout, ngClipboard) {
function compile(element, attrs) {
return {
pre: function (scope, element, attrs) {
if (!attrs.iconClass) {
attrs.iconClass = 'fa-copy';
}
if (!attrs.iconColorClass) {
attrs.iconColorClass = 'text-primary';
}
if (!attrs.tooltipPlacement) {
attrs.tooltipPlacement = 'auto top';
}
},
post: function (scope, element) {
scope.copy = ngClipboard.toClipboard;
// Tooltips hidden by default.
scope.tooltipIsOpen = false;
// Hiding tooltips on mouseenter event.
element.on('mouseenter', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
// Hiding tooltips on mouseleave event.
element.on('mouseleave', function () {
$timeout(
function() {
scope.tooltipIsOpen = false;
}, 200
);
});
}
}
}
return {
restrict: 'A',
replace: true,
scope: {
'iconClass': '@',
'iconColorClass': '@',
'clipboardData': '@',
'tooltipPlacement': '@'
},
compile: compile,
templateUrl: 'elements/_span-clipboard.html'
};
}
]
);
$timeout 确保它在我猜的 $apply 周期内运行。