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

我理解..

在CSS
可以使用angularjs

...因为我希望从这些事件中获得效果。悬停事件需要提取与该菜单项相关的信息，并且单击事件还应该能够执行与该菜单项相关的某些操作。廉价的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未定义。我也想传入索引，这样我就可以为某些菜单项做些特别的事情。

我的小提琴在这里：

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

Answer 1

ng-mouseenter="hoverIn($event)"

工作原理：ng-mouseenter有点聪明，除了你拥有的东西之外，它的范围内还有$ event（即你有hoverIn）。因此，当它解析提供的表达式时，它会启动带有事件的hoverIn。

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

Answer 2

您错过了从html传递 $ event 并且 srcElement 错误。请尝试以下方法：

<强> HTML

    <body ng-app="navTest" ng-controller="NavTestCtrl">
<div id="header">
    <div class="item" ng-click="click(1, $event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
1
    </div>
    <div class="item" ng-click="click(2, $event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
2
    </div>
    <div class="item" ng-click="click(3, $event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
3
    </div>
</div>
</body>

JS代码：

var app = angular.module('navTest', [

]);

app.controller('NavTestCtrl', function ($scope, $location, $http) {

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

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

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

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


  };


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

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

Answer 3

在angularjs中，您可以使用html代码中的$event

来获取活动

<div class="item" ng-click="click(1,$event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">

悬停逻辑

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

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

点击逻辑

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

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

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

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

更新小提琴：https://jsfiddle.net/zxjg3tpo/6/

这是另一个更新的小提琴，兄弟姐妹已经删除了他们的班级（以使点击工作正确） https://jsfiddle.net/zxjg3tpo/9/

如何在angularjs中进行简单的菜单导航

3 个答案: