angular js bootstrap ng-repeat表现得很奇怪 - 拖拽不起作用

Question

我试图在ng-repeat中显示一些数据作为小部件但是角度表现得很奇怪。我似乎不明白是什么导致了这一点。我试图将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-->

如果我将ng-repeat放在第一个div（span3 widget-container-span）上，则小部件拖动不起作用。

如果我将ng-repeat放在第二个div（div class =“widget box”）中，拖放功能可以工作，但是盒子垂直堆叠而不是水平，并且它们之间的间距是不计数的。它就像一个列拖放。

我的猜测 - 当使用角度ng-repeat时，容器div停止工作。

请指导我缺少的内容。

P.S。我正在使用偏见。

Answer 1

我使用了一个指令来避免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">