ondragstart,ondragover,onstart - $ scope未定义

时间:2015-05-12 19:40:51

标签: javascript angularjs drag-and-drop angular-digest

我的任务是使用angular处理删除的文本。我在拖放事件中不断收到此错误$scope is not defined。知道如何解决这个问题吗?

我已经研究了角度拖放库。它们不允许拖放简单文本。他们中的大多数都使用列表。如果有一个适用于此任务的话,请告诉我

以下是摘要:

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

这是控制器:

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

2 个答案:

答案 0 :(得分:6)

$scope对象在"境外角度背景" 中不可用。 每当你想在JavaScript(外角世界)中访问角度范围时,你需要通过获取该元素的DOM来获得scope。然后像angular.element(document.getElementById('testApp'))一样访问它的范围,这只是身体的范围。

Working Plunkr

请参阅此SO answers以访问角度上下文之外的范围。

答案 1 :(得分:1)

基于@ pankaj-parkar答案的较短的答案:

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