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