Как обрабатывать события 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>
|
в теле контроллера пишем не
function allowDrop(ev) {
ev.preventDefault();
}
а пишем $scope.allowDrop = function (ev) {
ev.preventDefault();
}
|
deivan, спасибо! Так тоже пробовал,
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>
|
В ангуляре события навешиваются через собственные атрибуты.
http://codef0rmer.github.io/angular-dragdrop/#/ https://github.com/marceljuenemann/a...and-drop-lists http://habrahabr.ru/sandbox/80139/ |
Сделал через собственную директиву, в качестве примера смотрел https://github.com/marceljuenemann/a...and-drop-lists
|
| Часовой пояс GMT +3, время: 19:17. |