Question

这里有两个问题，Finding Angular很难调试。似乎只是神奇地打破并修复自己的东西。例如，我有一个删除“网站”的ajax调用。工作得很好，我很满意，所以我决定添加一些代码来从列表中拼接它。现在我的身份证明是空的。我在谷歌浏览器中为我的onClick（）设置了一个断点，但它永远不会被击中。使用MVC5和角度 HTML

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

角度控制器

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)
        }
    }
    //for(var i=0)
    // find the $scope.sites that matches the id
    // javascript re mpve that elemtne from the array
};}]);

服务器控制器

public JsonResult Delete(Guid id)
    {
        try
        {
            //var convertedID = new Guid(id);
            _siteService.Delete(id);
            return Json("OK", JsonRequestBehavior.AllowGet);
        }
        catch (Exception e)
        {
            return Json("Error" + e.Message);
        }

    }

所以有人在这里发现问题，你们如何调试你的Angular？

Answer 1

似乎有一个javascript，一个http请求和一个asp.net mvc模型绑定流程来调试这里。

在javascript中我会添加一些console.log语句。我使用chrome进行开发和调试。您可以在“拼接循环”中添加console.log('site', i, id, $scope.sites);以检查是否获得了预期结果。

可以在网络标签中使用chrome监控Http流量，也可以下载fiddler2。两者都需要花一点时间来理解，但一旦你得到它，它是非常简单的。请注意请求中的表单值。它应该包含一个键id，其中包含该站点的id值。

在 asp.net mvc应用程序中，您可以在操作方法的第一行{行设置断点，并检查id变量以查看是否包含期望值。

调试AngularJS，拼接列表

1 个答案: