Angular Directive mouseenter/mouseleave funktioniert, setzt aber nach dem mouseleave nicht auf den Ausgangszustand. Jeder Rat würde sehr geschätzt werden

Question

Ich habe eine Direktive, die eine Liste von Studenteninformationen auf einer Vorlage zeigt und auf mouseenter zeigt es dann zusätzliche Studenteninformationen. Ich möchte in der Lage sein, mit mouseleave in den Ausgangszustand zurückzukehren.

Versucht alle Ressourcen und nicht viel Glück.

html - das ist, wo ich bin meine Richtlinie

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

html Richtlinie Vorlage

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

Richtlinie

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

    } 
}); 

Injektion

Vielen Dank im Voraus!

Answer 1

Ich hatte keine Daten, aber die ng-show Sache funktioniert, wie in diesem fiddle.

Hier ist eine einfachere Variante. Wenn Sie Ihre Vorlage die Teile enthält, die Sie wollen zeigen oder zu verbergen, mit einem ng-Show Variable es könnte Ihre Richtlinie ziemlich einfach sein:

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