AngularJS 和 Asp.Net WebApi 未在 firefox / chrome 中显示数据

Question

我有一个在端口 8080 上运行的 Asp.Net WebApi 服务器，它公开了一个 GET 方法（比如说IEnumerable<Friend> Get()）。

我在端口 55163 上运行另一个 Asp.Net 站点，其中包含一个 AnugularJs 项目。

当我从角度控制器调用$resource('...localhost:8080/api/friends') 并呈现如下数据时：

<ul>
    <li ng-repeat="friend in friends">
        {{friend.name}} who is {{friend.age}} years old.
    </li>
</ul>

该页面未在 Firefox 和 Chrome 中显示任何列表。我注意到到目前为止，使用 IE 没有问题。

我一直在检查来自 Firefox 的 XHR 请求调用，并且 JSON 已正确返回给客户端。

我正在使用 AngularJs 1.2.16 和 AspNet.WebApi 5.1.2

更多详情

如果我这样做（不调用服务）在我的控制器中：

$scope.friends = [
    { name: 'Person1', age: 30 },
    { name: 'Person2', age: 30 }
];

范围设置正确，但如果我这样做：

$http.get('...localhost:8080/api/friends').success(function (data) {
    $scope.friends = [];
    angular.forEach(data, function (item) {
        $scope.friends.push(item);
    });
});

或者那个：

var userResource = $resource('...localhost:8080/api/friends');
userResource.query({ method: 'GET', isArray: true }, function (data) {
    $scope.friends = [];
    angular.forEach(data, function (item) {
        $scope.friends.push(item);
    });
});

范围未填充...（或仅适用于 Internet Explorer）

更新 1

如果我把所有东西都放在同一个服务器下然后工作，我想知道它是否与 CORS 有某种关系。

Answer 1

检查 AngularJS 问题的第一个地方是浏览器控制台。通常会在此处记录任何错误。

如果没有错误，friends 可能没有正确填充。有没有试过调试 XHR 的结果并确认结果是否正在分配给朋友？