ng-mouseover 并离开以在 angularjs 中使用鼠标切换项目

Posted 2023-02-19

【中文标题】ng-mouseover 并离开以在 angularjs 中使用鼠标切换项目

【英文标题】：ng-mouseover and leave to toggle item using mouse in angularjs

【发布时间】：2014-04-27 06:42:33

【问题描述】：

html：

<ul ng-repeat="task in tasks">
    <li ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">task.name</li>
    <span ng-show="hoverEdit"><a>Edit</a></span>
</ul>

JS：

$scope.hoverIn = function()
    $scope.hoverEdit = true;
;

$scope.hoverOut = function()
    $scope.hoverEdit = false;
;

代码很荒谬，因为我认为它太多了。我认为可以简化。无论如何，一旦它悬停，结果就会切换所有项目。我有 jQuery 背景，所以我不知道如何使单个项目在 ng-repeat 中工作。

【问题讨论】：

在我看来，太多的混淆；如果你只写 和 --- 对于可点击的切换，我使用 ng-click=" flag=!flag" 它只是将它从 undefined 翻转为 true、false、true 等，并且 undefined 是 "falsey" 所以 !!flag 将是 "false" 并且 !flag 是 "true" 即使 typeof flag == ='未定义'

【参考方案1】：

角度解决方案

你可以这样修复它：

$scope.hoverIn = function()
    this.hoverEdit = true;
;

$scope.hoverOut = function()
    this.hoverEdit = false;
;

ngMouseover（和类似的）函数上下文内部是当前项目范围，因此 this 指的是当前子范围。

您还需要将ngRepeat 放在li 上：

<ul>
    <li ng-repeat="task in tasks" ng-mouseover="hoverIn()" ng-mouseleave="hoverOut()">
        task.name
        <span ng-show="hoverEdit">
            <a>Edit</a>
        </span>
    </li>
</ul>

Demo

CSS 解决方案

但是，如果可能的话，尽量只用 CSS 来做这些事情，这将是最佳解决方案，并且不需要 JS：

ul li span display: none;
ul li:hover span display: inline;

【讨论】：

这很酷。但我现在对 $scope 的使用更加困惑了哈哈。一个问题，如何为出现的项目设置动画？可以使用 css 转换吗？

你为什么感到困惑？ ngRepeat 为每个项目创建单独的子范围。但是$scope 是所有这些子作用域的父作用域。

哦，我明白了。感谢您的解释。也许我应该用纯 js 和 jquery 中的 $(this) 来研究这个。

CSS 解决方案是最干净、最优雅的。

【参考方案2】：

我会简单地在 ng-mouseover 和 ng-mouseleave 中进行分配；无需打扰js文件:)

<ul ng-repeat="task in tasks">
    <li ng-mouseover="hoverEdit = true" ng-mouseleave="hoverEdit = false">task.name</li>
    <span ng-show="hoverEdit"><a>Edit</a></span>
</ul>

【讨论】：

我想知道如何在 Angular 中添加带有悬停功能的 active 类。这个简单的小块以及ng-class="'active': hover" 成功了！

【参考方案3】：

我可能会将您的示例更改为如下所示：

<ul ng-repeat="task in tasks">
  <li ng-mouseover="enableEdit(task)" ng-mouseleave="disableEdit(task)">task.name</li>
  <span ng-show="task.editable"><a>Edit</a></span>
</ul>

//js
$scope.enableEdit = function(item)
  item.editable = true;
;

$scope.disableEdit = function(item)
  item.editable = false;
;

我知道这是一个细微的差别，但会使域与 UI 操作的绑定少一些。从心理上来说，考虑一个项目是可编辑的而不是被鼠标悬停更容易。

例如jsFiddle。

【讨论】：

哪个更好？与dfsq的答案相比？我发现这更令人困惑，哈哈

@user3398172 - 我不会说任何一个比另一个更好/更差。我倾向于避免在这些方法中使用this 指针，因为this 指的是什么并不明显。在 dfsq 的回答中，它恰好指的是单个中继器项目的 $scope。但是，如果在中继器外部调用，它将引用父级 $scope

【参考方案4】：

这里有点晚了，但我发现这是一个值得自定义指令处理的常见问题。这可能是这样的：

  .directive('toggleOnHover', function()
    return 
      restrict: 'A',
      link: link
    ;

    function link(scope, elem, attrs)
      elem.on('mouseenter', applyToggleExp);
      elem.on('mouseleave', applyToggleExp);

      function applyToggleExp()
        scope.$apply(attrs.toggleOnHover);
      
    

  );

你可以这样使用它：

<li toggle-on-hover="editableProp = !editableProp">edit</li> 

【讨论】：

非常好的解决方案，当您添加自己的范围函数时效果很好，例如：scope.setHoverState = function(row, hoverType) // code here 并在您的视图中切换悬停="setHoverState(item, 'myType')"

【参考方案5】：

这是一个只有 CSS 的例子。 例如，我使用的是 SASS 和 SLIM。

https://codepen.io/Darex1991/pen/zBxPxe

苗条：

a.btn.btn--joined-state
  span joined
  span leave

SASS：

=animate($property...)
  @each $vendor in ('-webkit-', '')
    #$vendortransition-property: $property
    #$vendortransition-duration: .3s
    #$vendortransition-timing-function: ease-in

=visible
  +animate(opacity, max-height, visibility)
  max-height: 150px
  opacity: 1
  visibility: visible

=invisible
  +animate(opacity, max-height, visibility)
  max-height: 0
  opacity: 0
  visibility: hidden

=transform($var)
  @each $vendor in ('-webkit-', '-ms-', '')
    #$vendortransform: $var

.btn
  border: 1px solid blue

  &--joined-state
    position: relative
    span
      +animate(opacity)

    span:last-of-type
      +invisible
      +transform(translateX(-50%))
      position: absolute
      left: 50%

    &:hover
      span:first-of-type
        +invisible
      span:last-of-type
        +visible
        border-color: blue