如何在AngularJS中放置$ .draggable（）後從模型中移除？

我有兩個AngularJS控制器，一個List的用戶和一個Trash區域。

的想法是，你可以從List用戶拖到Trash和List控制器將刪除該用戶從它的$scope.users陣列模式。

我很親密，我只是不知道如何發送user對象從$scope.users[]刪除。

我有一個工作JSBin這裏：（出於某種原因，它不會在我的瀏覽器是在1920×1080的工作;如果你退縮你的瀏覽器了一點它應該工作..奇怪）

http://jsbin.com/uMUfejeP/3/edit

如您所見，它調用list.deleteMe()函數，但我不知道如何發送要刪除的對象。我嘗試使用ngValue但這似乎並沒有太大的作用。

有誰知道如何解決這個問題？

在此先感謝！

來源

2014-01-16 Prodikl

由於您使用的是jqueryUI，因此您可以利用droppable API，特別是drop事件。

element.droppable({ 
    //... 
    drop: function(event, ui) { 
    // handle the drop 
    } 
    //... 
});

的一種方式，它並不一定是最好的辦法，就是用ui參數的draggable財產。

drop: function(event, ui) { 
    // this is how you get an angular scope from an element 
    var friendScope = angular.element(ui.draggable).scope() 
    // now, friendScope.friend is the friend you want to delete 
}

問題在於你開始真的在一起糾纏關注，但是這應該讓你擺脫眼前的位置。

以下是您的jsbin，重構爲具有Friends服務和Trash服務，並使用此方法。

將拖放功能封裝在自己的模塊中並公開一些指令API以使用它可能會更好。快速谷歌搜索'角度拖放'產生this project，其中，這樣做。

來源

2014-01-16 06:58:18 satchmorun

非常感謝！那完美的作品。是否有任何理由將'service'和'directive'與'angular.module（）'函數串在一起，而不是像以前那樣分離出來？我看到了Angular的這種寫法，並且很想知道它的標準。此外，感謝您向我展示'angular.element.scope（）'函數，這似乎非常有用。無論哪種方式，我會學習你的jsbin並以這種方式重構我的項目。感謝您的時間和質量響應。 – Prodikl

如果我真的試圖重構代碼，我也會將控制器放入模塊中。作爲一般的經驗法則，將所有內容放入一個模塊中 - 它使全局名稱空間清晰，並使得知道事情來自哪裏的更好。你仍然可以按照語法分解：'var app = angular.module（'app'，[]）;'然後'app.controller（..），app.directive（..）等等。 – satchmorun

非常感謝您的解釋！ – Prodikl

我最終做的只是發回user.user_id並搜索User對象具有相同的id。這似乎有點低效;我很想發送對User對象的引用並將其從陣列中刪除。

如果有人有關於如何做到這一點的想法，我會接受他們的答案，而不是我自己的答案。

來源

2014-01-16 06:27:28 Prodikl

如何在AngularJS中放置$ .draggable（）後從模型中移除？

回答

相關問題