Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.09.2015, 01:39
Аспирант
Отправить личное сообщение для igormog Посмотреть профиль Найти все сообщения от igormog
 
Регистрация: 08.04.2015
Сообщений: 39

Как обрабатывать события HTML5 внутри Angular.JS
Извиняюсь за глупый вопрос, но как подключить события HTML5 в Angular.JS?

Например, я хочу обработать событие из HTML5 - ondrop
Добавляю соответствующий атрибут в HTML и функции в контроллер (чтобы использовать другие функции и переменные из Angular.JS), на что мне Ангуляр отвечает: "прости чувак, но я ничего не знаю о таких функциях"

<!doctype html>
<html>
<head>
	<title>Angular</title>
	<meta charset="utf-8">
<style type="text/css">
#div1,
#div2,
#div3 {
	width:100px;
	height:35px;
	margin:10px;
	padding:10px;
	border:1px solid #aaaaaa;
}
</style>
</head>
<body ng-app='app' ng-controller="MainCtrl">
	<div class="drop" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div draggable="true" ondragstart="drag(event)" id="drag1" >Angular.JS</div>
	</div>
	<div class="drop" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div draggable="true" ondragstart="drag(event)" id="drag2" >jQuery.JS</div>
	</div>
	<div class="drop" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div draggable="true" ondragstart="drag(event)" id="drag3" >React.JS</div>
	</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);

app.controller('MainCtrl', function ($scope) {
	function allowDrop(ev) {
		ev.preventDefault();
	}
	function drag(ev) {
		ev.dataTransfer.setData("text", ev.target.id);
	}
	function drop(ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData("text");
		ev.target.appendChild(document.getElementById(data));
	}
});
</script>
Ответить с цитированием
  #2 (permalink)  
Старый 02.09.2015, 19:05
Аватар для deivan
Профессор
Отправить личное сообщение для deivan Посмотреть профиль Найти все сообщения от deivan
 
Регистрация: 02.08.2012
Сообщений: 293

в теле контроллера пишем не
function allowDrop(ev) {
	        ev.preventDefault();
	    }


а пишем
$scope.allowDrop = function (ev) {
    ev.preventDefault();
}
Ответить с цитированием
  #3 (permalink)  
Старый 02.09.2015, 21:11
Аспирант
Отправить личное сообщение для igormog Посмотреть профиль Найти все сообщения от igormog
 
Регистрация: 08.04.2015
Сообщений: 39

deivan, спасибо! Так тоже пробовал, при попытке вызвать событие drop, возникает непонятно откуда ошибка синтаксиса "SyntaxError: expected expression, got ')'"

UP: с синтаксической ошибкой разобрался, но все равно нифига не работает Uncaught ReferenceError: drag is not defined

Вот такой код:
<!doctype html>
<html>
<head>
	<title>Angular</title>
	<meta charset="utf-8">
<style type="text/css">
#div1,
#div2,
#div3 {
	width:100px;
	height:35px;
	margin:10px;
	padding:10px;
	border:1px solid #aaaaaa;
}
</style>
</head>
<body ng-app='app' ng-controller="MainCtrl">
	<div class="drop" id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div draggable="true" ondragstart="drag(event)" id="drag1" >Angular.JS</div>
	</div>
	<div class="drop" id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div draggable="true" ondragstart="drag(event,)" id="drag2" >jQuery.JS</div>
	</div>
	<div class="drop" id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
		<div draggable="true" ondragstart="drag(event)" id="drag3" >React.JS</div>
	</div>
</body>
</html>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);

app.controller('MainCtrl', function ($scope) {

	$scope.allowDrop = function (ev) {
		ev.preventDefault();
	}
	$scope.drag = function (ev) {
		ev.dataTransfer.setData("text", ev.target.id);
	}
	$scope.drop = function (ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData("text");
		ev.target.appendChild(document.getElementById(data));
	}

});
</script>

Последний раз редактировалось igormog, 03.09.2015 в 01:23.
Ответить с цитированием
  #4 (permalink)  
Старый 03.09.2015, 09:37
Аватар для BETEPAH
Профессор
Отправить личное сообщение для BETEPAH Посмотреть профиль Найти все сообщения от BETEPAH
 
Регистрация: 23.06.2011
Сообщений: 1,165

В ангуляре события навешиваются через собственные атрибуты.
http://codef0rmer.github.io/angular-dragdrop/#/
https://github.com/marceljuenemann/a...and-drop-lists
http://habrahabr.ru/sandbox/80139/

Последний раз редактировалось BETEPAH, 03.09.2015 в 09:40.
Ответить с цитированием
  #5 (permalink)  
Старый 28.09.2015, 19:51
Аспирант
Отправить личное сообщение для igormog Посмотреть профиль Найти все сообщения от igormog
 
Регистрация: 08.04.2015
Сообщений: 39

Сделал через собственную директиву, в качестве примера смотрел https://github.com/marceljuenemann/a...and-drop-lists
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
как правильно обращаться к свойствам объект внутри самого объекта ? mitiya Общие вопросы Javascript 12 25.04.2015 21:18
Как заставить JS обрабатывать функции для всех блоков с заданным классом? GTX14 Общие вопросы Javascript 1 04.04.2015 16:12
Как обрабатывать поля формы с одинаковыми названиями? javascript_pupil Общие вопросы Javascript 3 11.04.2012 21:25
Обработчик события: как делает jquery? Shasoft jQuery 35 22.04.2009 09:41
Как заставить this в обработчике события указывать на объект? Dmitryk Events/DOM/Window 3 16.03.2009 08:45