Direttiva angolare mouseenter/mouseleave funzionante ma non impostata sullo stato iniziale dopo il mouseleave. Qualsiasi consiglio sarebbe molto apprezzato

Question

Ho una direttiva che mostra un elenco di informazioni sugli studenti su un modello e su mouseenter mostra quindi ulteriori informazioni sugli studenti. Voglio essere in grado di tornare allo stato iniziale sul mouseleave.

Provato tutte le risorse e non molta fortuna.

html - questo è dove sto iniettando la mia direttiva

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

modello direttiva html

<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> 

direttiva

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 
     }); 
    } 

    } 
}); 

Grazie in anticipo!

Answer 1

Non avevo i vostri dati, ma la cosa ng-show funziona, come in questo fiddle.

Ecco una variante più semplice. Se il modello include le parti che si desidera visualizzare o nascondere, con una variabile ng-spettacolo su di esso, il tuo direttiva potrebbe essere abbastanza semplice:

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; 
      }); 
     }); 
    } 
};