如何在angularjs中进行简单的菜单导航
[英]How to make a simple menu navigation in angularjs
问题描述
I'm not really satisfied with what I can find. 
我对自己能找到的东西并不满意。 I just want a simple example of a menu system in Angularjs with hover effect and selection effect. 我只想要一个带有悬停效果和选择效果的Angularjs菜单系统的简单示例。
I understand that 'hover' effects can be done in CSS, but this is more of an exercise for me to understand angularjs better. 我知道可以在CSS中完成“悬停”效果，但这对我来说更好地理解angularjs。
What I am trying to do is pretty basic stuff. 我正在尝试做的是非常基本的东西。
Basically I have some HTML which has some DIVs (or menu items) : 基本上我有一些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>
I want to do two things. 我想做两件事。
- listen on click 听点击
- listen on mouseIn and mouseOut 监听mouseIn和mouseOut
I understand.. 我明白..
- It is probably nicer to do the hover effect in CSS 在CSS中进行悬停效果可能更好
- It is possible to do some inline logic in the HTML with angularjs 可以使用angularjs在HTML中执行一些内联逻辑
...because I want to have flow on effects from these events. ...因为我想让这些事件产生影响。 A hover event needs to pull information out related to that menu item, and a click event should also be able to perform some action related to that menu item. 悬停事件需要提取与该菜单项有关的信息，而单击事件也应该能够执行与该菜单项有关的某些动作。 Cheap CSS tricks are not going to solve this! 廉价的CSS技巧无法解决这个问题！
For my hover logic, I thought this would do the trick : 对于我的悬停逻辑，我认为这可以解决问题：
$scope.hoverIn = function($event){
angular.element($event.srcElement).addClass('hover')
};
$scope.hoverOut = function($event){
angular.element($event.srcElement).removeClass('hover')
};
However $event is undefined :( . How do I get to the element object from a mouseover event? 但是$ event是未定义的:(。如何从mouseover事件获取元素对象？
My click logic looks like this : 我的点击逻辑如下所示：
$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...
};
Same problem : $event is undefined. 相同的问题：$ event未定义。 I also want to pass in the index, so that I can do something special for certain menu items. 我还想传递索引，以便对某些菜单项做一些特殊的事情。
My Fiddle is here : 我的小提琴在这里：
https://jsfiddle.net/zxjg3tpo/5/ https://jsfiddle.net/zxjg3tpo/5/
3 个解决方案
解决方案1
2 2016-05-05 14:23:37
ng-mouseenter="hoverIn($event)"
How it works: ng-mouseenter is kinda clever and it has $event in its scope in addition to what you have (ie you have hoverIn). 工作原理：ng-mouseenter有点聪明，除了您拥有的东西（例如，您拥有hoverIn）之外，它还在$ event范围内。 So when it parse provided expression, it launches hoverIn with event. 因此，当它解析提供的表达式时，它将启动带有事件的hoverIn。
All work with elements, like addClass should be done in directives where you have direct access to html element. 所有与元素（例如addClass）一起使用的操作都应在您可以直接访问html元素的指令中完成。 Sometimes you may need angular.element(...) but in most cases you are happy with current element. 有时您可能需要angular.element(...)但是在大多数情况下，您对当前元素感到满意。 (In directive link : function(scope, element, attrs)) （在指令链接中：function（scope，element，attrs））
解决方案2
1 2016-05-05 14:30:06
You missed to pass $event from html and the srcElement was wrong. 您错过了通过html传递$ event的操作 ，并且srcElement错误。 Please try the following: 请尝试以下操作：
HTML 的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 Code: 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')
};
});
解决方案3
1 已采纳 2016-05-05 14:35:48
In angularjs you can get the event by using $event in your html code 在angularjs中，您可以通过在HTML代码中使用$ event来获取事件
<div class="item" ng-click="click(1,$event)" ng-mouseenter="hoverIn($event)" ng-mouseleave="hoverOut($event)">
Hover Logic 悬停逻辑
$scope.hoverIn = function($event){
angular.element($event.target).addClass('hover')
};
$scope.hoverOut = function($event){
angular.element($event.target).removeClass('hover')
};
Click logic 点击逻辑
$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...
};
Updated Fiddle : https://jsfiddle.net/zxjg3tpo/6/ 更新的小提琴： https : //jsfiddle.net/zxjg3tpo/6/
Here is another updated Fiddle where the siblings have their class removed (to make the click work correct) https://jsfiddle.net/zxjg3tpo/9/ 这是另一个更新的Fiddle，其中兄弟姐妹已删除其类（以使单击正常工作） https://jsfiddle.net/zxjg3tpo/9/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.