In Angular, directive that compiles template with ui-sortable, run twice with connected lists cannot drag-drop between both lists

问题

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/

回答1:

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

来源：https://stackoverflow.com/questions/19001170/in-angular-directive-that-compiles-template-with-ui-sortable-run-twice-with-co