Yeoman сгенерировал angularjs ng-repeat, не показывающий данные с контроллера

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

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

Я уверен, что оценю любую помощь.

Источник

3 ответа

Решение

this в

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

подразумевает, что вы должны использовать контроллер как синтаксис:

<div ng-controller="AboutCtrl as about">
  <ul>
    <li ng-repeat="thing in about.awesomeThings">
      {{ thing }}
    </li>
  </ul>
</div>
Источник

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

angular.module('clientApp')
 .controller('AboutCtrl', function ($scope) {
      $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
 ];
});
Источник

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

this подразумевает, что вы используете контроллер в качестве синтаксиса. Вот руководство для углового контроллера с примерами двух синтаксисов 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'
  ];
}]);
Источник
Другие вопросы по тегам