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']);
})();

BTW - 据说我根据我所遵循的课程，我还不需要['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>

＆＃13;

(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()
    }];
  }

＆＃13;

<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>

＆＃13;

Answer 2

Angular未加载或遇到错误。用F12打开开发工具，看看控制台是否有错误。同样在控制台中，您可以键入“angular”并按Enter键，如果它报告角度未定义，则角度未正确加载。

Answer 3

你在trip数组的第二个对象的'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()
}];

AngularJS Binding似乎不起作用

3 个答案: