【问题标题】:ondragstart, ondragover,onstart - $scope is not definedondragstart, ondragover,onstart - $scope 未定义
【发布时间】:2015-07-23 20:47:49
【问题描述】:

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

我已经研究了角度拖放库。他们不允许拖放简单的文本。他们中的大多数都使用列表。让我知道是否有适合此任务的方法

这里是plunker:

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

【问题讨论】:

  • 在您的 html 中,您使用的是 $scope.drag。您不需要$scope。只需使用drag($event)
  • 现在它说“未捕获的引用错误:未定义拖动,未定义允许拖放”。
  • 对不起,我是愚蠢的。你不能像你在 Angular 中那样做。即您不能将 $scope 函数放在常规属性中。您必须使用ng-<event> 版本。并且没有任何拖放事件。你需要使用类似ngDraggable
  • 我已经研究了类似 ng-Draggable 的库。我找不到一个允许拖放简单文本的。它们都适用于列表或 Html 元素。
  • 如果你用<span>text</span>元素包围你的文本,那么它将是一个HTML元素,也许你可以使用ng-draggable库?

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


【解决方案1】:

$scope 对象在 “外部角度上下文” 中不可用。 每当您想在 JavaScript 中访问角度范围(外部角度世界)时,您需要通过获取该元素的 DOM 来获取 scope ,然后像 angular.element(document.getElementById('testApp')) 一样访问它的范围,这不过是主体的范围.

Working Plunkr

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

【讨论】:

  • 感谢您回答我的问题
  • @kumaro 很高兴为您提供帮助。如果您使用指令这样做会更优雅..
【解决方案2】:

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

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

【讨论】:

    猜你喜欢
    • 2017-07-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-14
    相关资源
    最近更新 更多