I am trying to implement a feature in my directive template where an element is shown or hidden on mouseenter. Below is the code for my directive:
angular.module('myApp')
.directive("addToRoutes",['$http', '$timeout', function($http, $timeout) {
return {
template: '<div><a class="btn btn-default btn-round" ng-click="copy()" ng-mouseenter="showText()" ng-mouseleave="hideText()">\
<span class="icon icon-spinner icon-spin hidden" ng-class="{hidden : !loading}"></span>\
<span class="icon icon-plus" ng-class="{hidden : (loading || copied)}"></span>\
<span class="icon icon-check hidden" ng-class="{hidden : !copied}"></span>\
<span class="hidden" ng-class="{hidden : !showFull}">Nach mein Routen Kopieren</span></a></div>\
',
replace: true,
restrict: 'AE',
scope: {},
link: function($scope, element, attrs) {
var routeId = attrs.route;
$scope.loading = false;
$scope.copied = false;
$scope.showFull = true;
$scope.showText = function(){
$scope.showFull = true;
}
$scope.hideText = function(){
$scope.showFull = false;
}
$scope.copy = function(){
}
}
}
}])
The issue I am facing is that the showing/hiding functionality only works on the second iteration, meaning I have to enter, leave and then re-enter for it to work properly. I suspect it has something to do with the scope variables.
Any suggestions on how to fix this?