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

问题描述

我有一个自定义的 Angular 指令，它在模板中使用 ui-sortable.最初我无法让它识别 ui-sortable，但现在它基于 如何在 Angular 的客户指令模板中包含其他指令?

现在的问题是，如果我运行它两次，因此有两个可排序的列表，并且两者都有适当的类和 connectWith 选项，我无法从一个拖放到另一个.

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

是基本标记，指令是

myapp.directive('members',function($compile){返回 {限制:'A'，模板:'<h4>{{title}}</h4>'+'
'+'<li ng-repeat="列表中的成员" class="item">'+'{{会员}}' +'</li>'+'</ul>',转置:真，范围:{title:'@',list:'=',admin:'@'},链接:函数($scope,$element,attrs){attrs.$observe('admin', function(value) {如果($scope.admin){$element.find("ul").attr("ui-sortable","sortableOptions");$compile($element.contents())($scope);}});}};});

一个完整的工作(好吧，不工作，因此问题)在这里 http://jsfiddle.net/VjfEf/9/

解决方案

啊！由于您正在为指令使用隔离范围，因此在控制器范围内定义的可排序选项不再在指令内部访问.

因此从控制器中删除可排序选项并将它们移动到指令的链接函数中:

link: function ($scope,$element,attrs) {$scope.sortableOptions = {connectWith: '.connectedList',占位符:'占位符'，dropOnEmpty: 真};

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?

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

};
});

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
    };

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