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

Question

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.

Answer 1

角度解决方案

你可以像这样解决它:

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

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

在ngMouseover(和类似的)函数内部,context是当前的项目范围,因此这指的是当前的子范围.

你也需要把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>

演示

CSS解决方案

但是,如果可能尝试仅使用CSS执行此类操作,这将是最佳解决方案,并且不需要JS:

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

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

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

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