javascript - Angular JS删除Sinatra的方法

Question

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

我的代码如下:

应用.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>

Controller .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

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

将您的链接更改为:

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

并将此函数添加到此 View 绑定(bind)到的 $scope(具有“items”列表的 $scope):

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

小教程:
您的 View 与您从 Controller 代码中操作的特定 $scope 相关联。在那里，您定义“项目”列表和“删除下载”功能。对于列表中的每个项目，ng-repeat 创建一个新的 $scope，它原型(prototype)上从父 $scope(前面提到的那个)继承所有它的属性，加上它定义了一个名为“item”的新属性，它是列表中的一个项目当时。

当你写:

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

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

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