如何在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

我明白..

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

...因为我想让这些事件产生影响。 悬停事件需要提取与该菜单项有关的信息，而单击事件也应该能够执行与该菜单项有关的某些动作。 廉价的CSS技巧无法解决这个问题！

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

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

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

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

我的点击逻辑如下所示：

  $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有点聪明，除了您拥有的东西（例如，您拥有hoverIn）之外，它还在$ event范围内。 因此，当它解析提供的表达式时，它将启动带有事件的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/

这是另一个更新的Fiddle，其中兄弟姐妹已删除其类（以使单击正常工作） https://jsfiddle.net/zxjg3tpo/9/

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

问题描述

3 个解决方案

解决方案1
2 2016-05-05 14:23:37

解决方案2
1 2016-05-05 14:30:06

解决方案3
1 已采纳 2016-05-05 14:35:48

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

问题描述

3 个解决方案

解决方案1 2 2016-05-05 14:23:37

解决方案2 1 2016-05-05 14:30:06

解决方案3 1 已采纳 2016-05-05 14:35:48

解决方案1
2 2016-05-05 14:23:37

解决方案2
1 2016-05-05 14:30:06

解决方案3
1 已采纳 2016-05-05 14:35:48