Angular Directive mouseenter/mouseleave working but not setting to initial state after mouseleave

Question

I have a directive that shows a list of student information on a template and on mouseenter it then shows additional student information. I want to be able to go back to the initial state on mouseleave.

Tried all the resources and not much luck.

html - this is where i'm injecting my directive

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

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

Not saying I recommend this, but can't you capture the original HTML on entering, then set HTML back to that on leaving? — lintmouse
– lintmouse, Commented Sep 23, 2015 at 22:55
Why not always insert both and just hide/show the correct one? Than it can all be in the same template. — Jorg
– Jorg, Commented Sep 23, 2015 at 23:53
@Jorg will be trying this and adding a controller on the directive. — findjanice
– findjanice, Commented Sep 24, 2015 at 0:12
scope variable is already there, you could just use that with ng-show perhaps. if you have a jsfiddle I can see if that works. — Jorg
– Jorg, Commented Sep 24, 2015 at 0:25

Jorg · Accepted Answer · 2015-09-24 00:55:33Z

3

I didn't have your data, but the ng-show thing works, like in this fiddle.

Here's a simpler variant. If your template includes the parts you wish to show or hide, with an ng-show variable on it, your directive could be fairly 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;
            });
        });
    }
};

edited Sep 24, 2015 at 0:55

answered Sep 24, 2015 at 0:38

Jorg

7,2704 gold badges48 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Directive mouseenter/mouseleave working but not setting to initial state after mouseleave

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related