Как сделать простую навигацию по меню в angularjs

Я не очень доволен тем, что могу найти. Я просто хочу простой пример системы меню в Angularjs с эффектом зависания и эффектом выбора.Как сделать простую навигацию по меню в angularjs

Я понимаю, что эффекты «зависания» могут выполняться в CSS, но для меня это больше упражнение, чтобы лучше понять угловые.

Что я пытаюсь сделать, это довольно простой материал.

В принципе у меня есть некоторые HTML, который имеет некоторые DIVs (или пункты меню):

<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
Можно сделать некоторую встроенную логику в HTML с угловыми

... потому что я хочу иметь поток от эффектов от этих событий. Событие hover необходимо вывести информацию, относящуюся к этому элементу меню, и событие click также должно выполнить некоторые действия, связанные с этим пунктом меню. Дешевые трюки 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... 
    };

Такая же проблема:.. $ событие не определено Я также хочу передать в индекс, так что я могу сделать что-то особенное для некоторых пунктов меню

Мои Fiddle здесь:

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

источник

2016-05-05 Oliver Watkins

В angularjs вы можете получить событие с помощью $event в вашем HTML код

<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') 
    };

Нажмите Логика

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

Вот еще один обновленный Скрипки, где братья и сестры имеют их класс удалены (чтобы сделать щелчок работу правильно) https://jsfiddle.net/zxjg3tpo/9/

источник

2016-05-05 14:35:48

ahhh это 'target' не 'srcElement'. благодаря –

ng-mouseenter="hoverIn($event)"

Как это работает: нг-MouseEnter является своего рода умный и имеет $ событие в его рамках, в дополнение к тому, что у вас есть (т.е. у вас есть hoverIn). Поэтому, когда он анализирует предоставленное выражение, он запускает 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

ответ

Смежные вопросы