Yeoman 生成 angularjs ng-repeat 未显示来自控制器的数据

Question

我第一次涉足 MEAN 世界。我使用 yo angular 生成了一个自举的 angular 应用程序。接下来我将自动生成的默认内容 about.html 替换为

<div ng-controller="AboutCtrl">
  <ul>
    <li ng-repeat="thing in awesomeThings">
      {{ thing }}
    </li>
  </ul>
</div>

除了 about.js 控制器外还有一个：

'use strict';

/**
 * @ngdoc function
 * @name clientApp.controller:AboutCtrl
 * @description
 * # AboutCtrl
 * Controller of the clientApp
 */
angular.module('clientApp')
  .controller('AboutCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

index.html 文件中的相关内容是：

<body ng-app="clientApp">
.
.
.
<div class="container">
<div ng-view=""></div>
</div>

正如我所说，我对整个应用程序所做的唯一更改是更改 about.html 文件的内容。

然后我使用 grunt serve 到运行在浏览器中打开应用程序的程序。当我访问关于页面时，什么也没有，空白。我已经阅读了一些关于 angular 的内容，但到目前为止，我所阅读的内容都没有给我任何关于我可能做错了什么的想法。

当 yo angular 正在做它的事情时，我注意到一个红色的文本抱怨 package.json 已经存在，后来这个过程似乎挂起，直到我按下 Enter，然后它继续覆盖 package.json 文件并继续到最后，注释为一切都已完成且没有错误。

我当然会感谢您的帮助。

Answer 1

this 在

angular.module('clientApp')
  .controller('AboutCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

表示您必须使用 controllerAs 语法：

<div ng-controller="AboutCtrl as about">
  <ul>
    <li ng-repeat="thing in about.awesomeThings">
      {{ thing }}
    </li>
  </ul>
</div>

Answer 2

视图看起来正确，但在您的控制器中，我会将 "this" 更改为“$scope”：

angular.module('clientApp')
 .controller('AboutCtrl', function ($scope) {
      $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
 ];
});

Answer 3

我相信 estus 关于控制器的语法是正确的。这里有一些关于它和你的选择的更多信息。

this 暗示您正在使用控制器作为语法。这是 angular 控制器的指南，其中包含两种语法 https://docs.angularjs.org/guide/controller. here is another helpful breakdown http://toddmotto.com/digging-into-angulars-controller-as-syntax/.

的示例

如果您不想使用控制器作为语法，您应该将 awesomeThings 声明为控制器范围的属性。您需要注入范围变量才能以这种方式使用它。这是它的样子。

angular.module('clientApp')
.controller('AboutCtrl', ['$scope', function($scope) {
  $scope.awesomeThings = [
     'HTML5 Boilerplate',
     'AngularJS',
     'Karma'
  ];
}]);

Yeoman 生成 angularjs ng-repeat 未显示来自控制器的数据

Yeoman generated angularjs ng-repeat not showing data from controller

angularjs

angularjs-ng-repeat

yeoman-generator-angular