在角，指令，编译与UI可排序的模板，带连接列表运行两次不能拖放两个列表之间 [英] In Angular, directive that compiles template with ui-sortable, run twice with connected lists cannot drag-drop between both lists

问题描述

我有一个自定义的角度指令，在模板使用 UI可排序。本来我无法得到它认识到 UI可排序，但现在它的工作原理基于<一个href=\"http://stackoverflow.com/questions/19000285/how-do-i-include-other-directives-in-the-template-of-my-customer-directive-in-an/19000380\">How做我包括在角我的客户指令的模板其他指令？

I have a custom Angular directive, which uses ui-sortable in the template. Originally I could not get it to recognize the ui-sortable, but now it works based on How do I include other directives in the template of my customer directive in Angular?

现在的问题是，如果我跑了两次，因此有两个可排序列表，与两个相应的类和 connectWith 选项，我不能拖从一个下降到其他。

Problem now is if I run it twice, and thus have two sortable lists, with the appropriate class on both and connectWith option, I cannot drag and drop from one to the other.

<div members list="list1" title="{{title1}}" admin={{admin}}>
</div>

<div members list="list2" title="{{title2}}" admin={{admin}}>
</div>

时的基本标记，该指令

Is the basic markup, and the directive is

myapp.directive('members',function($compile){
return {
    restrict: 'A',
    template: '<h4>{{title}}</h4>'+
        '<ul ng-model="list" class="connectedList">' +
        '<li ng-repeat="member in list" class="item">' +
        '   {{member}}' +
        '</li>'+
        '</ul>',
    transclude:true,
    scope: {title:'@',list:'=',admin:'@'},
    link: function ($scope,$element,attrs) {
attrs.$observe('admin', function(value) {
  if ($scope.admin) {
          $element.find("ul").attr("ui-sortable","sortableOptions");
      $compile($element.contents())($scope);
  }
});
    }

};
});

一个完整的工作（当然，不工作，因此这个问题）是在这里 http://jsfiddle.net/ VjfEf / 9 /

A full working (well, not working, hence the question) is here http://jsfiddle.net/VjfEf/9/

推荐答案

啊！由于您使用的是一个孤立的余地指令，在控制器的范围定义的排序选项不再内部指令访问。

Ah! Since you are using an isolated scope for the directive, the sortable options defined on the scope of the controller are no longer accessible inside directive.

所以，从控制器可排序的选项并将其移动指令的链接函数中：

So remove the sortable options from the controller and move them inside the directive's link function:

link: function ($scope,$element,attrs) {
    $scope.sortableOptions = {
        connectWith: '.connectedList',
        placeholder: 'placeholder',
        dropOnEmpty: true
    };

这篇关于在角，指令，编译与UI可排序的模板，带连接列表运行两次不能拖放两个列表之间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！