如何在angularjs中進行簡單的菜單導航

我對我所能找到的東西並不滿意。我只想在Angularjs中使用一個簡單的菜單系統示例，其中包含懸停效果和選擇效果。如何在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和鼠標移開

我明白..

這可能是更好的做在CSS懸停效果
有可能在HTML中使用angularjs做一些內聯邏輯

...因爲我想讓這些事件產生效果。懸停事件需要拉出與該菜單項有關的信息，並且點擊事件也應該能夠執行與該菜單項有關的一些操作。廉價的CSS技巧不會解決這個問題！

對於我的懸停邏輯，我認爲這會做的伎倆：

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

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

但是$事件未定義:(我如何從鼠標懸停事件的元素對象

我？單擊邏輯是這樣的：

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

同樣的問題：。$事件是不確定的我也想在索引中通過，這樣我可以做一些特別針對某些菜單項

我的小提琴是在這裏：

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

來源

2016-05-05 Oliver Watkins

在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/

來源

2016-05-05 14:35:48

ahhh它的'目標'不是'srcElement'。謝謝 –

ng-mouseenter="hoverIn($event)"

工作原理：NG-的mouseenter是有點聰明，它在其除了範圍是否有什麼事件$（即你有懸停）。所以當它解析提供的表達式時，它會用事件啓動hoverIn。

所有使用元素的工作，比如addClass都應該在可以直接訪問html元素的指令中完成。有時您可能需要angular.element(...)，但在大多數情況下，您對當前元素感到滿意。（在向鏈路：功能（範圍，元素，ATTRS））

來源

2016-05-05 14:23:37

你錯過了通過從HTML $事件和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') 
    }; 
});

來源

2016-05-05 14:30:06 Pranab

如何在angularjs中進行簡單的菜單導航

回答

相關問題