在 Angular 中，使用 ui 排序编译模板的指令，使用连接列表运行两次，无法在两个列表之间拖放

Question

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

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

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

是

基本标记，指令是

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/

Answer 1

啊！由于对指令使用隔离作用域，因此在控制器作用域上定义的可排序选项在指令中不再可访问。

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

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