0

ui-sortableテンプレートで使用するカスタム Angular ディレクティブがあります。もともと私はそれを認識させることができませんでしたが、現在はAngularの顧客ディレクティブのテンプレートに他のディレクティブを含める方法にui-sortable基づいて動作しますか?

問題は、それを 2 回実行して、2 つの並べ替え可能なリストがあり、両方に適切なクラスと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/

4

1 に答える 1

2

ああ！ディレクティブに分離スコープを使用しているため、コントローラーのスコープで定義されたソート可能なオプションは、ディレクティブ内でアクセスできなくなりました。

コントローラーからソート可能なオプションを削除し、ディレクティブのリンク関数内に移動します。

link: function ($scope,$element,attrs) {
    $scope.sortableOptions = {
        connectWith: '.connectedList',
        placeholder: 'placeholder',
        dropOnEmpty: true
    };
于 2013-09-25T09:46:03.007 に答える