On the div
with the class of ticker
, I'd like to remove the pulse
CSS animation class once the user ng-mouseenter
s.
I don't have a directive setup just for the ticker
div, but is there a simple way to remove or update the pulse
class in this case?
Markup
<ul>
<li ng-repeat="tik in tgh.tag.tickers">
<div class="tag-container" ng-mouseleave="tgh.leaveAssoTicker(tik)">
<div class="ticker"
ng-class="{'fade-1 pulse' : tgh.tag.mainSearch}"
ng-mouseenter="tgh.hoverAssoTicker(tik)"
ng-click="tgh.selectTicker(tik)">{{tik.ticker}}</div>
<ticker-hover ticker="tik"></ticker-hover>
</div>
</li>
</ul>
The mouseenter function
function hoverAssoTicker(ticker, type) {
vs.tickerTagsHoverTimeout = $timeout(function() {
var theTicker = {};
if (ticker.ticker === undefined) {
theTicker.ticker = ticker;
} else {
theTicker.ticker = ticker.ticker;
}
ApiFactory.getTickerDetails(theTicker.ticker).then(function(data) {
ticker.longname = data.data.tickers[0].longname;
if (type === 'portfolio') {
ticker.removePortfolio = true;
}
else if (type === 'searched') {
ticker.addPortfolio = true;
}
else {
ticker.removePortfolio = false,
ticker.addPortfolio = false;
}
ticker.tickerHoverDisplay = true;
});
vs.closeTagsTikHoverTimer = $timeout(function() {
if (ticker.tickerHoverDisplay) ticker.tickerHoverDisplay = false;
}, 2000);
$rootScope.$broadcast(vs.closeTagsTikHoverTimer);
}, 500);
}
I would use a binding variable and use that in ng-class
, such as ticker.isMouseover
. Then in your ng-mouseenter
event, set it to true, and vice versa for ng-mouseleave
.
Then you can have something like ng-class="{pulse: !tik.isMouseover}"