Обработка событий

Последнее обновление: 26.04.2017

Отдельная группа директив связана с обработкой пользовательских событий. Рассмотрим директиву ng-click, которая фактически будет эквивалентна обработке события onclick в javascript. Вначале создадим небольшой проект. Все знают сервис stackoverflow, где задаются вопросы и можно проголосовать за понравившийся ответ. Сделаем что-то подобное.

Вначале создадим новый файл QuestionController.js, в котором определим контроллер QuestionController:

var myApp=angular.module('myApp');
myApp.controller('QuestionController', function($scope) {
	
	$scope.question={
		text: 'Какой js-фреймворк лучше использовать?',
		author: 'Иван Иванов',
		date: '20/10/2013',
		answers: 
		[{
			text: 'AngularJS!',
			author: 'Вова Сидоров',
			date: '20/10/2013',
			rate:2
		},{
			text: 'AngularJS лучше всех',
			author: 'Олег Кузнецов',
			date: '20/10/2013',
			rate:0
		},{
			text: 'Я бы использовал knockout',
			author: 'Неизвестный',
			date: '21/10/2013',
			rate:0
		}]
	};
	
	$scope.voteUp = function (answer){
		answer.rate++;
	};
	$scope.voteDown = function (answer){
		answer.rate--;
	};
	$scope.questColorClass= "questcolor";
	$scope.changeClass = function (e) {
		
		$scope.questColorClass = e.type == "mouseover" ? "questselectedcolor" : "questcolor";
	}
});

Здесь через объект $scope на веб-страницу передается сложный объект question, в котором определены название вопроса, автор, дата и набор ответов со своими параметрами, в том числе с рейтингом (rate). Кроме того, у нас объявлены две функции, которые уменьшают и увеличивают рейтинг переданного ответа.

Кроме того, объявлен специальный объект questColorClass, который будет хранить класс, и функция changeClass, которая меняет класс в зависимости от типа события.

Теперь перейдем к коду html. Он будет выглядеть следующим образом:

<!doctype html>
<html ng-app='myApp'>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/mystyles.css" />
</head>
<body>
<div  ng-controller="QuestionController">
<div class="quest" ng-class="questColorClass"
ng-mouseenter="changeClass($event)"
ng-mouseleave="changeClass($event)">
<h3>{{question.text}}</h3>
<p>{{question.author}} </p> <p><i>{{question.date}}</i></p>
</div>
<h3>Ответы</h3>
<div class="answers">
<div ng-repeat="answer in question.answers" class="answer">
<div class="vote">
    <a class="vote-up" ng-click="voteUp(answer)"></a>
    <span class="rate">{{answer.rate}}</span>
    <a class="vote-down" ng-click="voteDown(answer)"></a>
</div>
<b>{{answer.text}}</b>
<p>{{answer.author}}</p>
<p><i>{{answer.date}}</i></p>
</div>
</div>
</div>
<script src="js/lib/angular.min.js"></script>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
</script>
<script src="js/controllers/QuestionController.js"></script>
</body>
</html>

Для каждого объекта answer (то есть ответа) у нас создается блок vote, в котором есть две ссылки. При нажатии на каждую ссылку срабатывает функция, на которую указывает директива ng-click: <a class="vote-up" ng-click="voteUp(answer)">. И в каждую функцию передается текущий объект answer. Таким образом, можно увеличивать и уменьшать рейтинг.

Для объекта вопроса устанавливается обработчик событий ng-mouseenter и ng-mouseleave: ng-mouseenter="changeClass($event)". Здесь уже в качестве параметра в функцию обработчика передается специальный объект $event, который может использоваться для обработки любого события и который несет в себе информацию об обрабатываемом событии.

В подключемом на веб-страницу файле стилей mystyles.css определим ряд классов, в том числе классы, которые будут переключаться в обработчике события changeClass:

.quest {
	border-bottom: 1px solid #aaa; 
	margin-bottom: 10px; 
}
.questcolor {
	background: #F6F6F6;
}
.questselectedcolor{ 
	background: #ddd;
}
.answer {
	border-bottom: 1px solid #ccc; 
	margin-bottom: 10px;
}
.vote {
	float: left; 
	text-align: center; 
	width: 21px; 
	margin-right: 20px;
}
.vote-up, .vote-down{
	display: block;
	margin: 0px auto;
	width: 21px;
	height: 25px;
}
.vote-up{
	background-position: 0px 0px;
	background-image: url("../img/sprite.png");
	background-repeat: no-repeat;
	overflow: hidden;
}
.vote-down{
	background-position: 0px -20px;
	background-image: url("../img/sprite.png");
	background-repeat: no-repeat;
	overflow: hidden;
}

В качестве изображения стили используют небольшой спрайт с двумя стрелочками внизу и вверх. В итоге проект будет выглядеть следующим образом:

Stackoverflow на AngularJS

В итоге визуально веб-страница будет выглядеть так:

Обработка событий в AngularJS

Кроме директивы ng-click, предназначенной для обработки кликов по элементам, имеется еще ряд директив:

  • ng-blur: определяет поведение для события blur, которое возникает при потере элементом фокуса

  • ng-focus: определяет поведение для события focus, которое возникает при получении фокуса элементом

  • ng-change: определяет поведение для события change, которое возникает при изменении элементом состояния, например, при нажатии на элемент input type="checkbox"

  • ng-submit: определяет поведение для события submit, которое возникает при отправке формы

  • ng-copy/ng-cut/ng-paste: определяет поведение для событий копирования, вырезки и вставки соответственно

  • ng-dblclick: та же ng-click, только обрабатывается двойное нажатие

  • ng-mousedown: для обработки нажатия клавиши мыши

  • ng-mouseup: для обработки отжатия мыши

  • ng-mouseenter: для обработки наведения курсора в определенную область

  • ng-mouseleave: для обработки ухода курсора с определенной области

  • ng-mousemove: для обработки перемещения курсора мыши

  • ng-keydown: обработка нажатия клавишы клавиатуры

  • ng-keypress: обработка нажатия клавишы клавиатуры

  • ng-keyup: обработка отжатия клавишы клавиатуры

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850