1

一部のデータを ng-repeat 内のウィジェットとして表示しようとしていますが、Angular の動作がおかしいです。何が原因なのか理解できていないようです。ng-repeat を入れようとしている HTML はこれです。

<div class="span3 widget-container-span">
                                <div class="widget-box">

                                    <div class="widget-header widget-header-small header-color-dark">
                                        <h6 class="smaller">{{ me.head }}</h6>

                                        <div class="widget-toolbar no-border">
                                            <label>
                                                <input type="checkbox" class="ace ace-switch ace-switch-3" />
                                                <span class="lbl"></span>
                                            </label>
                                        </div>

                                        <div class="widget-toolbar">
                                            <span class="label label-warning">
                                                1.2%
                                                <i class="icon-arrow-down"></i>
                                            </span>
                                            <span class="badge badge-info">{{ me.label }}</span>
                                        </div>
                                    </div>

                                    <div class="widget-body">
                                        <div class="widget-main">
                                            <div class="alert alert-info">
                                                {{ me.desc }}
                                            </div>
                                        </div>
                                    </div>

                                </div> <!-- end widget box-->
                            </div><!-- end span3 widget container-->

最初の div (span3 widget-container-span) に ng-repeat を配置すると、ウィジェットのドラッグが機能しません。ウィジェットコンテナのドラッグが起動しない

ng-repeat を 2 番目の div (div class = "widget box") に配置すると、ドラッグ アンド ドロップ機能は機能しますが、ボックスは水平方向ではなく垂直方向に積み重ねられ、それらの間の間隔はカウントされません。列のドラッグ アンド ドロップのようなものです。ウィジェットコンテナのドラッグは機能しますが、垂直方向のみです

私の推測 - angular ng-repeat を使用すると、コンテナー div が機能しなくなります。

私が欠けているものを案内してください。

PSパーシャルを使用しています。

4

1 に答える 1

0

jqueryとangularのソート可能な競合を回避するためにディレクティブを使用しました

myScrum.directive("ngSortable", function(){
return {
    link: function(scope, linkElement, attrs){                  
        linkElement.sortable({
            placeholder: "placeholder",
            opacity: 0.8,
            axis: "x,y",
            update: function(event, ui) {
                // get model
                var model = scope.$eval(attrs.ngSortable);

               // loop through items in new order
                linkElement.children().each(function(index) {
                    var item = $(this);

                    // get old item index
                    var oldIndex = parseInt(item.attr("ng-sortable-index"), 10);

                    model[oldIndex].seq = index;
                });
                // notify angular of the change
                scope.$apply();
            }
        });
    }
};
});

divで次のように使用されます

<div class="widget-box" ng-sortable-index="{{$index}}" ng-repeat="item in sid">
于 2013-10-20T12:22:01.917 に答える