相关疑难解决方法(0)

我是AngularJS的新手,我对当前项目有点压力,这就是我在这里问的原因.

我看到AngularJS有ng-dragstart事件(http://docs.ng.dart.ant.ck.me/angular.directive/NgEventDirective.html),但它似乎不起作用.在其他页面上,我可以看到其他开发人员建议做新的"指令".

所以我的问题是:"在AngularJS中是否实现了本机ng-drag功能,还是我自己应该实现？"

我正在建立一个angularjs/firebase应用程序unsing angularfire绑定(v0.5.0).

我有一个项目列表,显示在一个表格ng-repeat中<tr>,如下所示:

<table>                               
    <tbody>                                                                
        <tr ng-repeat="(index, item) in items">
            <td>
                <input type="checkbox" ng-model="item.done">
            </td>              
            <td>                                                 
                <input type="text" ng-model="item.text" ng-focus="onItemFocus(index)" ng-blur="onItemBlur(index)">
            </td>                                                              
            <td>                                                               
                <button type="button" ng-click="remove(index)">&times;</button>
            </td>                                                              
        </tr>                                                                  
    </tbody>                                                               
</table>                                                                   

并且在这个项目列表上有一个angularfire 3路数据绑定,如:

$scope.ref = new Firebase('...');
$scope.remote = $firebase($scope.ref);
$scope.remote.$child("items").$bind($scope, "items"); 

这一切都很好,但现在我正在尝试添加拖放重新排序项目的可能性.

我设法使用jquery-ui(基本上是调用$("tbody").sortable())来设置拖放UI ,但我的问题是将它绑定到角度模型.有一个数量 的 问题就在于(与大jsfiddles),但在我的情况下angularfire 3双向绑定似乎搞乱它.

我想我需要在angularfire中使用firebase 优先级,orderByPriority并且可能在其中一个sortable回调中处理它,但是我很难弄清楚我应该怎么做...并且找不到任何关于它的文档.

有没有人做过类似的事情,你能否分享一些如何设置它的指针？

我正在关注一个关于在Angular中实现Drag&Drop的很棒的教程,我最初在这个StackOverflow答案中找到了这个链接到作者的博客和GitHub代码.

当我实现它并在我的项目中测试它时,我得到了错误:

[$parse:isecdom] Referencing DOM nodes in Angular expressions is disallowed! Expression: dropped(dragEl, dropEl)

根据Angular Docs,问题在于我引用了一个将DOM对象作为DOM属性中的参数的函数 - 它发生在这一行:

<div x-lvl-drop-target='true' x-on-drop='dropped(dragEl, dropEl)'>drop zone</div>

正如您所看到的,该on-drop属性将此dropped函数(在我的控制器中定义)传递给指令lvlDropTarget(在下面发布),该指令调用它来执行用户执行的拖放操作.我喜欢这种设计,因为它使该指令可以在同一个应用程序中重复使用许多不同的拖放可能性.实际上,我只需要在我的控制器中定义一个不同的函数,并通过on-drop属性将它传递给指令.

然而,不幸的是,这似乎被Angular击落了.有没有人有任何其他如何实现相同的设计和功能,但在某种程度上Angular更好吗？

这是lvlDropTarget指令

module.directive('lvlDropTarget', ['$rootScope', 'uuid',
  function ($rootScope, uuid) {
    return {
      restrict: 'A',
      scope: {
        onDrop: '&'
      },
      link: function (scope, el, attrs, controller) {
        var id = angular.element(el).attr("id");
        if (!id) {
          id = uuid.new()
          angular.element(el).attr("id", id);
        }

        el.bind("dragover", function (e) …

这是观点

.container(ng-controller="activityCtrl")
  h3 Edit your plan
  .row
    .one-half.column
      div(draggable="true" ondragstart="onDrag()") I am draggable

我已经在控制器中定义了一个函数

$scope.onDrag = (evt)=>{
  console.log(evt);
  ev.dataTransfer.setData("text", ev.target.id);
}

我得到的错误是Reference error onDrag not defined.我猜这是因为我需要引用$ scope中定义的函数ondragstart.我怎么能这样做？