ui-sortable
テンプレートで使用するカスタムAngularディレクティブがあります。元々は認識できませんでしたui-sortable
が、Angularの顧客ディレクティブのテンプレートに他のディレクティブを含めるにはどうすればよいですか?
ここで問題となるのは、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/
ああ!ディレクティブに分離されたスコープを使用しているため、コントローラーのスコープで定義されたソート可能なオプションは、ディレクティブ内でアクセスできなくなります。
したがって、ソート可能なオプションをコントローラーから削除し、ディレクティブのリンク関数内に移動します。
link: function ($scope,$element,attrs) {
$scope.sortableOptions = {
connectWith: '.connectedList',
placeholder: 'placeholder',
dropOnEmpty: true
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加