展Angularjs記錄 - 新手

Question

這是一個真正的新手問題：

我有我的索引視圖中的Rails在ERB：

<div ng-app="Donor"> 
    <div ng-controller="DonorCtrl"> 

    <ul> 
    <li ng-repeat="donor in donors"> 
     {{donor}} 
    </li> 
    </ul> 

</div> 
</div> 

我的捐贈JSON從Rails的返回是：

class DonorSerializer < ActiveModel::Serializer 
    attributes :id, :tools_id, :first_name, :last_name 
end 

我的JavaScript文件有這個;

var app; 

app = angular.module("Donor", ["ngResource"]); 

    // separate view to Add new donors 

$scope.addDonor = function() { 
    var donor; 
    donor = Entry.save($scope.newDonor); 
    $scope.donors.push(entry); 
    return $scope.newDonor = {}; 
}; 

$scope.showDonors = function() { 
    var Donor = $resource("/donors", { 
    update: { 
     method: "GET" 
    } 
}); 
return $scope.donors = Donor; 

} 

this.DonorCtrl = function($scope, $resource) { 
    var Donor; 
    Donor = $resource("/donors/:id", { 
    id: "@id" 
}, { 
    update: { 
     method: "PUT" 
    } 
}); 
return $scope.donors = Donor.query(); 
}; 

如何獲得捐助者列表以便在我的索引視圖中查看？

我失去了一些東西

Answer 1

你的一個首要問題是，你沒有在控制器內的正確的代碼。我也把你的$資源轉化爲工廠。由於您有'addDonor'方法，因此我將Donors更新方法更改爲'PUT'。

確保您還擁有正確的angularjs庫設置。爲此，您需要：

angular.js 
angular-resource.js 

改變後的Javascript：

var app; 

app = angular.module("Donor", ["ngResource"]); 

app.factory("Donors", [ 
    "$resource", function($resource) { 
    return $resource("/donors", {}, { 
     update: { 
     method: "PUT" 
     } 
    }); 
    } 
]); 

app.factory("Donor", [ 
    "$resource", function($resource) { 
    return $resource("/donors/:id", { 
     id: "@id" 
    }, { 
     update: { 
     method: "GET" 
     } 
    }); 
    } 
]); 

this.DonorCtrl = [ 
    "$scope", "Donor", "Donors", function($scope, Donor, Donors) { 
    var donor; 
    $scope.donor = Donor.query(); 
    $scope.donors = Donors.query(); 
    $scope.addDonor = function() {}; 
    donor = Donor.save($scope.newDonor)(function() { 
     return $scope.donors.push(donor); 
    }); 
    return $scope.newDonor = {}; 
    } 
]; 

由於您使用的軌道，這裏是CoffeeScript的版本（我發現它與angularjs組合優雅）：

app = angular.module("Donor", ["ngResource"]) 

app.factory "Donors", ["$resource", ($resource) -> 
    $resource("/donors", {}, {update: {method: "PUT"}}) 
] 
app.factory "Donor", ["$resource", ($resource) -> 
    $resource("/donors/:id", {id: "@id"}, {update: {method: "GET"}}) 
] 

@DonorCtrl = ["$scope", "Donor", "Donors", ($scope, Donor, Donors) -> 
    $scope.donor = Donor.query() 
    $scope.donors = Donors.query() 

    $scope.addDonor = -> 
     donor = Donor.save($scope.newDonor) -> 
      $scope.donors.push donor 
     $scope.newDonor = {} 
] 

我會結賬EggHead.io以更好地瞭解如何設置您的角度JavaScript文件。