javascript - 如何在angularjs中制作一个简单的菜单导航

Question

我对我能找到的东西不是很满意。我只想要一个 Angularjs 中具有悬停效果和选择效果的菜单系统的简单示例。

我知道“悬停”效果可以在 CSS 中完成，但这更多是为了让我更好地理解 angularjs。

我正在尝试做的是非常基本的事情。

基本上我有一些 HTML，其中有一些 DIV(或菜单项):

<div NavCtrl id="header">
    <div class="item" ng-click="click(1)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
1
    </div>
    <div class="item" ng-click="click(2)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
2
    </div>
    <div class="item" ng-click="click(3)" ng-mouseenter="hoverIn()" ng-mouseleave="hoverOut()">
3
    </div>
</div>

我想做两件事。

• 监听点击
• 监听 mouseIn 和 mouseOut

我明白了..

1. 用 CSS 做悬停效果可能更好
2. 可以使用 angularjs 在 HTML 中执行一些内联​​逻辑

...因为我想对这些事件产生影响。悬停事件需要拉出与该菜单项相关的信息，而点击事件也应该能够执行与该菜单项相关的某些操作。廉价的 CSS 技巧无法解决这个问题!

对于我的悬停逻辑，我认为这可以解决问题:

  $scope.hoverIn = function($event){
    angular.element($event.srcElement).addClass('hover')
  };

  $scope.hoverOut = function($event){
    angular.element($event.srcElement).removeClass('hover')
  };

但是 $event 是未定义的 :( 。如何从鼠标悬停事件获取元素对象？

我的点击逻辑是这样的:

  $scope.click = function(position, $event) {

    elem = angular.element($event.srcElement);

    if (elem.hasClass("clicked")) {
      elem.removeClass("clicked")
    }else {
      elem.addClass("clicked")
    }

    // if (position == 1) //do something etc...
  };

同样的问题:$event 未定义。我还想传入索引，以便我可以对某些菜单项做一些特殊的事情。

我的 fiddle 在这里:

https://jsfiddle.net/zxjg3tpo/5/

Answer 1

ng-mouseenter="hoverIn($event)"

它是如何工作的:ng-mouseenter 有点聪明，除了你拥有的(即你有 hoverIn)之外，它的范围内还有 $event。因此，当它解析提供的表达式时，它会启动带有事件的 hoverIn。

所有与元素相关的工作，比如 addClass 都应该在你可以直接访问 html 元素的指令中完成。有时您可能需要 angular.element(...) 但在大多数情况下您对当前元素感到满意。 (在指令链接中:function(scope, element, attrs))