AngularJS数据不会通过ng-route加载

时间:2016-07-07 09:51:00

标签: javascript html angularjs router

我正在尝试将一些数据放入选项卡中。我的应用程序使用ng-route,所以这是我的配置代码:

app.config(['$routeProvider', function($routeProvider){
$routeProvider
    .when('/EventList',{
        templateUrl:'html/eventsList.html',
        controller: 'eventListController',
        controllerAs:'eventListCrtl'
            })
    .otherwise({redirectTo:'/'});
}]);

我在这里定义控制器和控制器在我的模板中使用controllerAs

的名称

这是我的控制器代码:

app.controller('eventListController',['$scope', 'EventListHolder', function($scope, EventListHolder){
    var eventList = EventListHolder.get();
    window.alert(eventList.eventHead[1].numeroDossier);

}]);

它从工厂检索数据。由于window.alert有效,数据将加载到控制器中。

但是对于一些共鸣,它看不出现在我的模板中,我试图在HTML表格中显示eventHead表。 这是HTML:

<div align="center">
            <div class="container-fluid">
                <header>
                    <h1>Event List</h1> 
                </header>
            </div>

            <table class="row-spacer40 table-fill" >
                <thead>
                    <tr>

                        <th class="text-left">Numero</th>
                        <th class="text-left">Dossier/Client</th>
                        <th class="text-left">Lieu</th>


                    </tr>
                </thead>

                <tr ng-repeat="event in eventListCrtl.eventList.eventHead">
                    <td> <a href="/EventDetail">{{event.numeroDossier}}</a>
                    </td>
                    <td>{{event.designationDossier}}<br>{{event.nomClient}}
                    </td>
                    <td>{{event.adresse}}
                    </td>
                </tr>
            </table>
 </div>

我忽视了ng-route特有的东西吗?

PS:如果有帮助,这里是包含数据的JSON。 (如果您想要清楚地定义我的数据结构。)

    {
"eventHead": [
    {
        "numeroDossier": 96549,
        "designationDossier": "TECHNIQUE MARIAGE ",
        "nomClient": "Olivia John & Donovan Hamlet",
        "adresse": "ABBAYE DES VAUX DE CERNAY"
    },
    {
        "numeroDossier": 98986,
        "designationDossier": "TOURNEE FDJ OLA",
        "nomClient": "LA FRANCAISE DES JEUX",
        "adresse": "MAGNUM"
    }
],
"success": true
  }

1 个答案:

答案 0 :(得分:0)

您应该使用

this.eventList = EventListHolder.get();

而不是var eventList。 ControllerAs语法要求将视图模型绑定到'this'对象而不是$ scope。