Angular JS删除方法到Sinatra

Question

我目前正在尝试研究如何使用 Angular JS 和 Sinatra 删除记录。目前该代码会引发内部 500 服务器错误。我在网上四处寻找有关如何正确执行此操作的教程，但找不到任何相关的内容。

我的代码如下：

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

下载.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);
}]);

任何帮助将不胜感激。

Answer 1

您不需要第二个控制器来执行此操作 (MyCtrl3)。

将您的链接更改为：

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

并将此函数添加到此视图绑定到的 $scope（具有“项目”列表的 $scope）：

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

小教程：
您的视图与您从控制器代码中操作的特定 $scope 相关联。在那里，您定义您的“项目”列表和“删除下载”功能。对于列表中的每个项目，ng-repeat 创建一个新的 $scope，它原型继承自父 $scope（前面提到的那个）它的所有属性，此外它还定义了一个名为“item”的新属性，它是列表中的一个项目当时。

当你写：

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

您本质上定义了一种“表达式”，它根据关联的 $scope 进行评估。这意味着您可以引用的变量（词法范围）必须是与锚点 DOM 元素关联的 $scope 的属性。由于锚元素是列表项元素的子元素，因此它与在那里创建的 $scope 相关联。这个 $scope 有一个从它的父 $scope 继承的“deletedownload”成员和一个由 ng-repeat 创建的“item”成员。

我建议你使用 Firefox 和 Firebug + AngScope（我写的一个小扩展）来检查 DOM 元素后面的 $scopes。您还应该验证对后端的 HTTP 调用是否包含正确的数据。