2013-11-04 60 views
3

我目前正在努力解決如何刪除使用Angular JS和Sinatra的記錄。目前該代碼會引發內部500服務器錯誤。我在網上瀏覽瞭如何正確執行此操作的教程,但找不到任何相關的內容。角JS刪除方法Sinatra

我的代碼如下所示:

app.rb

#Delete download 
#not working... 
delete '/view1/downloaddelete' do 
ng_params = JSON.parse(request.body.read) 
@download = Download.get(ng_params) 

if @download.destroy 
    {:success => "ok"}.to_json 
    #log to console if download delete is successful 
    puts "download delete successful" 
else 
    halt 500 
    #log to console if download delete is unsuccessful 
    puts "download delete unsuccessful halt 500" 
end 
end 

downloads.html

<p>Manage downloads</p> 
<ul> 
    <li ng-repeat="item in items">Title: {{item.title}}, ID: {{item.downloadID}}<a ng-controller="MyCtrl3" ng-click="deletedownload({{item.downloadID}})">Delete</a></li> 
</ul> 

controllers.js

//not working... 
app.controller('MyCtrl3', ['$scope', '$http', function ($scope, $http) { 
$scope.downloaddeleteid = {}; 
$scope.deletedownload = function() { 
    $http({ 
     method : 'DELETE', 
     url : '/view1/downloaddelete', 
     data : $scope.downloaddeleteid 
    }); 
} 
console.log($scope.deletedownload); 
}]); 

任何幫助將是非常請欣賞。

回答

2

你不需要第二個控制器來做到這一點(MyCtrl3)。

更改鏈接:

<a ng-click="deletedownload(item.downloadID)">Delete</a> 

這個功能添加到$範圍,這種觀點結合(即有「項目」列表中的$範圍):

$scope.deletedownload = function(downloadID) { 
    $http({ 
     method : 'DELETE', 
     url : '/view1/downloaddelete', 
     data : downloadID 
    }); 
} 

小教程:
您的視圖與您從控制器代碼操作的特定$範圍相關聯。在那裏,您可以定義您的「項目」列表和「已下載」功能。對於列表中的每個項目,ng-repeat創建一個新的$作用域,它從父級$ scope(前面提到的那個)原型繼承它的所有屬性,並且定義了一個名爲「item」的新屬性,它是列表中的一個項目當時。

當你寫:

ng-click="deletedownload(item.downloadID)" 

你本質上定義了一種評估其對相關$範圍「表達」的。這意味着您可以引用的變量(詞法作用域)必須是錨DOM元素所關聯的$ scope的屬性。由於anchor元素是列表項元素的子元素,因此它與在此處創建的$範圍相關聯。這個$ scope有一個從它的父$ scope繼承的「deletedownload」成員和一個由ng-repeat創建的「item」成員。

我建議你使用Firefox和Firebug + AngScope(我寫的一個小擴展)來檢查DOM元素後面的$ scopes。您還應該驗證對您後端的HTTP調用是否包含正確的數據。

+0

非常感謝!非常豐富的答案:)我也必須修改我的ruby方法,請參閱編輯! –