2015-05-12 9 views
5

Meine Aufgabe ist es, den gelöschten Text mit eckigen zu verarbeiten. Ich bekomme diesen Fehler $scope is not defined bei Drag & Drop-Ereignissen. Irgendeine Idee, wie man das repariert?

Ich habe bereits in eckige Drag & Drop-Bibliotheken geschaut. Sie erlauben kein Drag & Drop für einfachen Text. Die meisten von ihnen arbeiten mit Listen. Lassen Sie mich wissen, ob es eine, die für diese Aufgabe ist arbeitet

Hier ist der Plunker:

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

hier ist die Steuerung:

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

in Ihrem HTML Sie verwenden '$ scope.drag'. Sie brauchen den $ scope nicht. Verwenden Sie einfach 'drag ($ event)'. – ajkavanagh

+0

Nun heißt es "Uncaught ReferenceError: Ziehen ist nicht definiert, allowDrop ist nicht definiert". – kumaro

+1

Sorry, ich war dumm. Du kannst nicht tun, was du in Angular getan hast, so wie du es tust. Sie können $ scope-Funktionen nicht in reguläre Attribute einfügen. Sie müssen die 'ng-' Versionen verwenden. Und es gibt keine für Drag & Drop-Ereignisse. Sie müssen etwas wie [ngDraggable] (http://ngmodules.org/modules/ngDraggable) verwenden – ajkavanagh

Antwort

6

$scope Objekt nicht verfügbar in "Außenwinkel Kontext". Wann immer Sie angle scope in JavaScript (Außen eckigen Welt) zugreifen möchten, müssen Sie die scope von erhalten, indem Sie das DOM dieses Elements & dann Zugriff auf den Umfang wie angular.element(document.getElementById('testApp')), die nichts anderes als Bereich des Körpers ist.

Working Plunkr

diese SO answers Siehe Zugriff auf den Umfang außerhalb Winkel Kontext zu erhalten.

+0

Danke für die Beantwortung meiner Frage – kumaro

+0

@ Kumaro froh, Ihnen zu helfen .. es wäre eleganter, wenn Sie dies mit Direktive tun .. –

1

ein kürzerer basierend auf @ pankaj-Parkar Antwort:

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