1

我编写了一个简单的 ASP.NET WEBApi，它返回客户列表，我正在尝试绑定到 UI。

在我的 WEB Api 控制器下面找到：

    public class DummyController : ApiController
    {
        public HttpResponseMessage Get()
        {
            List<Customer> customers = new List<Customer>();
            Customer customer = new Customer();
            customer.FirstName = "John";
            customer.LastName = "Doe";
            customers.Add(customer);
            customer = new Customer();
            customer.FirstName = "Mike";
            customer.LastName = "Doobey";
            customers.Add(customer);

            HttpResponseMessage result = null;
            result = Request.CreateResponse(HttpStatusCode.OK, customers);
            return result;
        }
    }

角度控制器：

<script type="text/javascript">
    function dummyCtrl($scope) {
        $.getJSON("http://127.0.0.1:81/Api/dummy", function (resp) {
            $scope.dummy = resp;
            $scope.json = angular.toJson(resp);
            console.log($scope.json);
        });
    }
</script>

执行 Angular 控制器：

<body ng-controller="dummyCtrl">
    <div>
        <ul>
    <li ng-repeat = "person in dummy">
        <span>{{person.FirstName}}</span>
        <span>{{person.lastname}}</span>
    </li>
        </ul>
    </div>
</body>

我能够在 Chrome 开发工具中看到 JSON 数据，但无法在浏览器中看到输出。

[{"FirstName":"John","LastName":"Doe"},{"FirstName":"Mike","LastName":"Doobey"}] :81/:24
[{"FirstName":"John","LastName":"Doe"},{"FirstName":"Mike","LastName":"Doobey"}] :81/:24

我究竟做错了什么？

4

1 回答 1

4

您应该在 XmlHTTPRequest 周围使用 angularJS 自己的 Wrapper，它会自动执行 $digest。因此，将您的代码更改为：

function dummyCtrl($scope, $http) {
    $http.get("http://127.0.0.1:81/Api/dummy").then( function (resp) {
        $scope.dummy = resp.data;
        $scope.json = angular.toJson(resp.data);
        console.log($scope.json);
    });
}

有关更多信息，请参见此处：Angular $http 参考

于 2012-10-12T06:37:05.633 回答