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

How to make a simple menu navigation in angularjs

本文关键字：简单 菜单 导航 angularjs      更新时间：2023-09-26

我对所能找到的并不满意。我只想要一个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/

ng-mouseenter="hoverIn($event)"

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

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

在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...
  };

更新Fiddle：https://jsfiddle.net/zxjg3tpo/6/

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

您错过了从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')
  };
});
相关文章：