Question

我第一次涉足MEAN世界。我使用yo 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来运行在浏览器中打开应用程序的程序。当我访问about页面时，没有什么，空白。我已经阅读了一些关于角度的内容，但到目前为止，我所阅读的内容并没有给我任何关于我可能做错的想法。

当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表示您使用控制器作为语法。这里是角度控制器的指南，其中包含两个语法https://docs.angularjs.org/guide/controller的示例。这是另一个有用的细分http://toddmotto.com/digging-into-angulars-controller-as-syntax/。

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

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

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

3 个答案: