Ondragstart, ondragover, onstart - $ scope not defined

Question

My task is to process the discarded text using angular. I keep getting this error $scope is not defined when dragging events. Any idea how to fix this?

I already looked through the angular drag and drop libraries. They do not allow drag and drop for plain text. Most of them work with lists. Let me know if there is work that works for this task.

Here is the plunker:

[ http://plnkr.co/edit/egKL13hsHka6RiX4UfSS?p=preview ] [+1]

here is the controller:

 var app = angular.module("test", []); app.controller('testCtrl', ['$scope',function ($scope) { $scope.nouns = ['guitar']; $scope.verbs = ['play']; $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"); if(ev.target.id =='verb' && $scope.verbs.indexOf(data) != -1){ ev.target.appendChild(document.getElementById(data)); } else{ alert(data + ' is not a ' + ev.target.id +'. Try again'); } }; }]); 

Answer 1

$scope object will not be available in "Out of Angular Context" . Whenever you want to access the angular scope in JavaScript (the outside world of angular), you need to get the scope by getting the DOM of this element, and then access its scope as angular.element(document.getElementById('testApp')) , which is nothing more than body volume.

Working plunkr

Refer to SO to access an area outside the angular context.

Answer 2

shorter based on @ pankaj-parkar answer:

 <div draggable="true" ondrag="angular.element(this).scope().on_drag(event)"></div>