Yeoman сгенерировал angularjs ng-repeat, не отображая данные от контроллера

Мое первое знакомство с миром 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 для запуска программы, которая открывает приложение в браузере. Когда я захожу на страницу «О нас», там ничего нет, пусто. Я немного читал об angular, но до сих пор ничего из того, что я читал, не дает мне никаких идей относительно того, что я мог делать неправильно.

Когда yo angular делал свое дело, я заметил красный текст, который жаловался на то, что package.json уже существует, позже процесс, казалось, завис, пока я не нажал Enter, затем он продолжил перезаписывать файл package.json и продолжился до конца с комментарий, что все завершилось без ошибок.

Я уверен, что буду признателен за каждую помощь.


angularjs angularjs-ng-repeat yeoman-generator-angular
person Napoleon    schedule 04.08.2015    source источник

Ответы (3)


arrow_upward
4
arrow_downward

this in

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>
person Estus Flask    schedule 05.08.2015

arrow_upward
2
arrow_downward

Представление выглядит правильно, но в вашем контроллере я бы вместо этого изменил «это» на «$scope»:

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

arrow_upward
1
arrow_downward

Я считаю, что Эстус прав насчет контроллера как синтаксиса. вот еще немного информации об этом и ваших альтернативах.

this подразумевает, что вы используете контроллер в качестве синтаксиса. вот руководство для контроллера angular с примерами двух синтаксисов https://docs.angularjs.org/guide/controller. вот еще одна полезная разбивка http://toddmotto.com/digging-into-angulars-controller-as-syntax/.

Если вы не хотите использовать контроллер в качестве синтаксиса, вы должны объявить awesomeThings как свойство области вашего контроллера. Вам нужно будет ввести переменную области видимости, чтобы использовать ее таким образом. Вот как это будет выглядеть.

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