Angular The mouseenter / mouseleave directive works, but is not set to its initial state after mouseleave. Any advice would be highly appreciated

Question

I have a directive that displays a list of student information in the template, and on mouseenter - shows additional information about the student. I want to return to the initial state on the mouse.

Tried all the resources and no luck.

html - this is where I insert my directive

<div ng-repeat="student in studentPortfolio"> <portfolio-view student="student"></portfolio-view> </div> 

html template

 <div class="outer-box"> <img src="{{student.picture}}" alt="{{student.name.first}} {{student.name.last}}" style="width: 200px; height: 200px"> Name: {{student.name.first}} {{student.name.last}} <br>Bio: {{student.Bio}} <br> Skills: <div ng-repeat="skill in student.skills"> {{skill.title}} </div> <br> </div> 

directive

 app.directive('portfolioView', function() { return { restrict: 'E', scope: { student: "=" }, templateUrl: '/html-templates/hoverPortfolio.html', link: function(scope, elem, attrs) { //gets the first project and shows it var project = scope.student.projects; var firstProject = project[0]; var fp_name = firstProject.name; var fp_type = firstProject.projectType; var fp_description = firstProject.description; //gets the second project and shows it var secondProject = project[1]; var sp_name = secondProject.name; var sp_type = secondProject.projectType; var sp_description = secondProject.description; //the template that shows the second project var newHtml = '<div class="projects outer-box"><div class="firstproject"> Project Name: ' + fp_name + '<br>Type: ' + fp_type + '<br>Description: ' + fp_description + '</div><br><div class="secondproject"> Project Name: ' + sp_name + '<br>Type: ' + sp_type + '<br>Description: ' + sp_description + '</div> </div>'; elem.on('mouseenter', function() { elem.html( newHtml ) }); elem.on('mouseleave', function() { //return to intial state }); } } }); 

Thanks in advance!

Answer 1

I did not have your data, but ng-show works, as in this fiddle .

Here is a simpler option. If your template contains parts that you want to show or hide with the ng-show variable on it, your directive can be quite simple:

 return { restrict: 'EAC', replace: true, template: '<div><div ng-show="show">show</div><div ng-show="!show">hide</div></div>', link: function (scope, element, attrs, controller) { scope.show = true; element.on('mouseenter', function () { scope.$apply(function () { scope.show = false; }); }); element.on('mouseleave', function () { scope.$apply(function () { scope.show = true; }); }); } };