角度指令 mouseenter/mouseleave 工作但在 mouseleave 后未设置为初始状态答案

【问题标题】：Angular Directive mouseenter/mouseleave working but not setting to initial state after mouseleave角度指令 mouseenter/mouseleave 工作但在 mouseleave 后未设置为初始状态
【发布时间】：2023-03-23 03:09:01
【问题描述】：

我有一个指令，它在模板上显示学生信息列表，然后在 mouseenter 上显示其他学生信息。我希望能够在 mouseleave 上回到初始状态。

尝试了所有资源，但运气不佳。

html - 这是我注入指令的地方

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

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>

指令

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

【问题讨论】：

不是说我推荐这个，但是你不能在进入时捕获原始HTML，然后在离开时将HTML设置回那个？
为什么不总是插入两者并隐藏/显示正确的？比它们都可以在同一个模板中。
@Jorg 将尝试这个并在指令上添加一个控制器。
scope 变量已经存在，您可以将其与 ng-show 一起使用。如果你有一个 jsfiddle，我可以看看它是否有效。

标签： javascript jquery angularjs angularjs-directive angularjs-scope

【解决方案1】：

我没有你的数据，但 ng-show 的东西可以工作，就像在这个 fiddle 中一样。

这是一个更简单的变体。如果您的模板包含您希望显示或隐藏的部分，并且上面带有 ng-show 变量，那么您的指令可能相当简单：

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

【讨论】：