ng-repeat 仅在 IE 中工作答案

【问题标题】：ng-repeat only working in IEng-repeat 仅在 IE 中工作
【发布时间】：2014-02-16 14:14:55
【问题描述】：

我正忙于学习 Angular+Typescript+bootstrap，但偶然发现了一个我无法解决的问题。我在部分视图中有一个 ng-repeat：

<div>
<h1>Debtors</h1>
<table class="table table-hover">
    <thead>
        <tr>
            <th>Debtor</th>
            <th class="col-sm-1"></th>
            <th class="col-sm-1"></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="Debtor in vm.Debtors">
            <td>{{Debtor.Name}}</td>
            <td><a href="" ng-click="vm.EditDebtor(Debtor.ID)"><i class="fa fa-pencil fa-fw fa-lg"></i> Edit</a></td>
            <td><i class="fa fa-trash-o fa-fw fa-lg"></i> Delete</td>
        </tr>
    </tbody>
</table>

使用控制器：

module Controllers
{    
export class DebtorsController
{
    static $inject = ['$scope', '$http', '$modal'];
    Debtors: Models.TradePartyModel[];
    ModalService: ng.ui.bootstrap.IModalService; 

    constructor($scope: ng.IScope, $http: ng.IHttpService, $modal: ng.ui.bootstrap.IModalService)
    {
        this.ModalService = $modal;

        $http.get("http://localhost:51263/api/debtors/1")
            .success((Debtors) => 
            {
                this.Debtors = Debtors;
            });            
    }        
}
}

路由定义为：

$routeProvider.when('/Debtors/ViewDebtors', {
    templateUrl: 'App/Views/Debtors/Debtors.html',
    controller: Controllers.DebtorsController,
    controllerAs: "vm"
});

这在 IE 中工作得非常好，它显示表格和所有数据，但这在 FireFox 或 Chrome 中似乎不起作用。我检查了提琴手，数据正确返回，但表格没有显示。

有什么想法吗？谢谢！

【问题讨论】：

任何控制台错误？您是否安装了 Chrome Angular 扩展以在 Debtors 返回后验证范围？
在 Firefox 控制台中没有错误，chrome 将此作为错误： GET localhost:51263/api/debtors/1 angular.js:7889 (anonymous function) angular.js:7889 sendReq angular.js:7720 $http.serverRequest angular.js:7454 WrappedCallback angular.js:10655 WrapbackCallback angular.js:10655（匿名函数） angular.js:10741 Scope.$eval angular.js:11634 Scope.$digest angular.js:11479 $delegate.__proto__.$摘要 VM48:844 Scope.$apply angular.js:11740 $delegate.__proto__.$apply VM48:855（匿名函数） angular.js:8950 jQuery.event.dispatch jquery-1.9.1.js:3074 elemData.handle
不完全确定角度扩展是如何工作的，但它提供了三个作用域，1 个根作用域和根作用域下的 2 个兄弟作用域。第二个作用域说：这个作用域没有模型，第三个作用域有： vm: { ModalService: { ... } }

标签： angularjs typescript

【解决方案1】：

好的，经过几次尝试修复此问题后，Chrome 决定吐出此错误：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

在服务器上启用 CORS 解决了我的问题。看起来它现在可以在所有浏览器上运行。

【讨论】：