簡體   English   中英

AngularJS UI可排序-_connectedSortables未定義

[英]Angularjs ui-sortable - _connectedSortables is undefined

我有2個可排序的列表,我試圖將它們連接起來,以便可以將項目從一個列表拖到另一個列表。 當我拖動項目時,sortable.js出現錯誤。 callbacks.update引用ui.item.sortable._connectedSortables,但是它是未定義的,因此當它到達getElementScope函數時,將引發錯誤。

更新

關於我如何到達這里,我只提供一些背景知識。 最初,我有這項工作。 我設置了一個可拖動列表,並將其連接到可排序列表,並且一切正常。 然后,我遇到的問題是在可排序列表中拖動時,模型沒有得到更新。 一旦添加了ui-sortable標簽,該模型便開始在對列表重新排序時開始更新,但是在更改之后,即開始發生上述錯誤。 這兩個代碼之間的差異在第一個示例中,我將像這樣設置可排序對象:

$('#testQuestionsTEI').sortable({//code});

並且標記中沒有ui-sortable屬性。 現在,我在標記中具有ui-sortable =“ sortable”並具有$ scope.sortable = {// code}。

我擁有的第一個清單是接受清單。

<div id ="testQuestionsTEI" class="connectedSortable" ui-sortable="sortable" ng-model="test.questions" style="overflow-x:auto; overflow-y: scroll">
                            <div class="TestQuestion" ng-repeat="currQuestionObj in test.questions" style="border:1px solid;padding:7px 7px 7px 7px;margin-top:3px;margin-bottom:3px">
                                <!--do some stuff-->
                            </div>
                        </div>

設置可排序的js在這里...

 $scope.sortable = {
    placeholder: 'questionPlaceholderTEI',
    connectWith: '.connectedSortable',
    start: function (event, ui) {
        ui.item.startPos = ui.item.index();                 //add startPos to item to use in stop event
    },
    stop: function (event, ui) {
        //Do stuff
        }

    },
    update: function (event, ui) {
        //Do stuff
    }
};

第二個列表是在ajax調用之后構建的,其html是...

<div id="SearchResultItems" ui-sortable="sortable" class="col-md-12 connectedSortable" style="border:1px solid;padding:0 5px 0 5px;" ng-cloak>
<div class="SearchResultItem" index="{{currQuestionObj.id}}" QuestionID="{{currQuestionObj.questionId}}" ngc-done="'setupDraggableItems'" ng-repeat="currQuestionObj in ItemSearchResult.questions" style="border:1px solid;padding:7px 7px 7px 7px;margin-top:3px;margin-bottom:3px" >
    <!--more stuff-->
</div>

數據返回后,我設置了可拖動和可排序的

function setupDraggableItems() {
$('div.SearchResultItem').draggable({
    revert: 'clone',
    scroll: false,
    helper: 'clone',
    cursor: 'move',
    appendTo: 'body',
    connectToSortable: '#testQuestionsTEI',
});

$('#SearchResultItems').sortable({
    placeholder: 'questionPlaceholderTEI',
    connectWith: '.connectedSortable'
});
}

我也嘗試了沒有.draggable的情況,但出現了另一個錯誤。 在callbacks.update中,有對ui.item.sortable.isCanceled()的引用,錯誤是“對象不支持屬性或方法'isCanceled'

我發現問題是,當創建可排序對象時,我執行它們的2種不同方法實際上是不同的實現。 一種是直接使用Jquery-ui,另一種是angular的ui-sortable。 所以我回到使用$('#testQuestionsTEI')。sortable用戶Jquery-ui。 不會更新模型的另一個問題是通過調用$ scope。$ apply()來解決的。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM