Having trouble debugging Angular lately. It feels like things are breaking and fixing themselves magically. For instance, I had an ajax call to delete a "site" which was working fine until I decided to add some code to remove it from the list as well. Now, the id comes through as null and my onClick() breakpoint in Chrome never gets hit. I'm using MVC5 and Angular.
<table class="table">
<tr>
<th>
Value
</th>
<th></th>
</tr>
<tr ng-repeat="site in sites">
<td>
{{site.Value}}
</td>
<td>
<button id="delete-{{site.Id}}" class="btn btn-primary" ng-click="deleteSite(site.id)">Delete</button>
</td>
</tr>
Angular controller
ngApp.controller('siteController', ['$scope', '$http', '$location', function ($scope, $http, $location) {
$http.post(ROOT + '/Site/LoadAll/')
.success(function (result) {
$scope.sites = result;
}).
error(function (data, status, headers, config) {
// log to console?
});
$scope.deleteSite = function (id) {
//$http.post(ROOT + 'SiteList/Delete/', JSON.stringify(id)) //null id
//$http.post(ROOT + 'SiteList/Delete/', id) //Invalid JSON primitive: 5f6d794f-bf13-4480-9afd-3b10d7b6ae32.
//$http.post(ROOT + 'Site/Delete/', { id: id } )
$http.post(ROOT + '/Site/Delete/' + id)
.success(function (result) {
// log to console?
}).
error(function (data, status, headers, config) {
// log to console?
});
for (var i = $scope.sites.lenght - 1; i >= 0; i--)
{
if ($scope.sites[i].id == id)
{
$scope.sites.splice(i,1)
}
}
};}]);
Server controller
public JsonResult Delete(Guid id)
{
try
{
_siteService.Delete(id);
return Json("OK", JsonRequestBehavior.AllowGet);
}
catch (Exception e)
{
return Json("Error" + e.Message);
}
}
Can anyone identify an issue here? How do you go about debugging your Angular applications?