AngularJS绑定似乎不起作用

Question

我是Angular的新手，简单的绑定对我不起作用。

它只是显示了{{ trip.name }}和{{trip.created}}书写方式。

我的控制器：

(function () {
    "use strict";
    angular.module("app-trips")
        .controller("tripsController", tripsController);

    function tripsController() {
        var vm = this;
        vm.trips = [{
            name: "US Trip",
            created: new Date()
        }, {
            name: "World Trip",
            created = new Date()
        }];

我班的一部分：

@section Scripts {
    <script src="~/lib/angular/angular.min.js"></script>
    <script src="~/js/app-trips.js"></script>
    <script src="~/js/tripsController.js"></script>
}
<div class="row" ng-app="app-trips">

    <div ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3">
        <table class="table table-responsive table-striped">
            <tr ng-repeat="trip in vm.trips">
                <td>{{ trip.name }}</td>
                <td>{{ trip.created }}</td>
            </tr>
       </table>
    </div>

控制器的视图：

(function () {
    "use strict";
    angular.module("app-trips", ['ngSanitize']);
})();

顺便说一句-根据我所遵循的课程，我还不需要['ngSanitize'] ，但是如果没有它，它甚至不会显示DIV 。

编辑 ：@jellyraptor注意到，我用=代替了错字：

编辑2 ：

这是我真的不需要的错字+ [ ngSanitize ]。 我修复了错字并传递了一个空数组，一切正常。 谢谢大家

Answer 1

因为您使用的是controllerAs语法，所以此处的变量是vm 。 因此对于访问范围对象，请使用vm而不是tripsController

<tr ng-repeat="trip in vm.trips">
    <td>{{ trip.name }}</td>
    <td>{{ trip.created }}</td>
</tr>

 (function() { "use strict"; angular.module("app-trips", []); })(); angular.module("app-trips") .controller("tripsController", tripsController); function tripsController() { var vm = this; vm.trips = [{ name: "US Trip", created: new Date() }, { name: "World Trip", created: new Date() }]; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.2/angular.min.js"></script> <div ng-app="app-trips" ng-controller="tripsController as vm" class="col-md-6 col-md-offset-3"> <table class="table table-responsive table-striped"> <tr ng-repeat="trip in vm.trips"> <td>{{ trip.name }}</td> <td>{{ trip.created }}</td> </tr> </table> </div> 

Answer 2

Angular未加载或遇到错误。 使用F12调出开发工具，并查看控制台中是否有错误。 同样在控制台中，您可以键入“ angular”，然后按Enter键，如果它报告未定义angular，则表明angular无法正确加载。

Answer 3

您在trips数组的第二个对象的“ created”属性中添加了一个等号。

vm.trips = [{
    name: "US Trip",
    created: new Date()
}, {
    name: "World Trip",
    created = new Date()
}];

应该

vm.trips = [{
    name: "US Trip",
    created: new Date()
}, {
    name: "World Trip",
    created: new Date()
}];