AngularJS ng-repeat не отображает (Browserify и Watchify в фоновом режиме)

ProgramBox

AngularJS ng-repeat не отображает (Browserify и Watchify в фоновом режиме)

Post author:admin
Запись опубликована:18 апреля, 2023
Post category:Вопросы по программированию

#javascript #angularjs #angularjs-ng-repeat #browserify #watchify

Вопрос:

Я пытаюсь создать базовое приложение Angular с модулем, контроллером и представлением. Я изо всех сил пытаюсь заставить angular интерпретировать содержимое в «{{}}».

Я запускаю Browserify, который подталкивает все к «./js/bundle.js «.

Вот мой код:

index.html

 <!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="./js/bundle.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in namesCtrl">{{name.names}}</li>  
      </ul>     
 </body>

</html>

app.js

 "use strict";

var app = angular.module('showNames', []);

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

Мой браузер отображает только {{name.names}}.

Есть идеи, что здесь происходит, чего мне не хватает или как я могу улучшить свой подход?

Спасибо!

1. Вы ссылались на AngularJS?

2. Какие-либо ошибки в вашей консоли?

3. по-прежнему отсутствуют некоторые детали вашей настройки. мы не видим, например, где вам требуется () угловой. взгляните на этот пример проекта github.com/sombriks/… и в этом package.json github.com/sombriks/blogpost-etdefense/blob/master/package.json таким образом, вы можете понять, как выполнить минимальную настройку, чтобы заставить thngs работать.

4. Я ссылаюсь на angular через require в app.js и он передается в bundle.js . Моей самой большой проблемой было смешивание синтаксисов ‘controller as’ и ‘$ scope’, а затем не полное понимание того, как реализовать ng-repeat (т. Е. ng-repeat повторяет то, что я назначил для $ scope, а не для всего контроллера). Приложение работает, и теперь для меня все намного яснее. Спасибо!

Ответ №1:

Проблема в том, что в вашем ng-repeat вы пытаетесь получить имена из контроллера, вы должны использовать свою модель, которая является частью вашего контроллера, т.Е. «имя в именах», а не «имя в namesCtrl».

 "use strict";

var app = angular.module('showNames', []);

app.controller('namesController', ['$scope', function($scope){
        $scope.names = ["jeff", "jim", "jay", "Please show up"];
 }]);

 <!DOCTYPE html>
<html ng-app="showNames">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
    <title> Help </title>
</head>

 <body>
    <h1>Show Those Names</h1>
      <ul ng-controller="namesController as namesCtrl">        
        <li ng-repeat="name in names">{{name}}</li>  
      </ul>     
 </body>

</html>

1. Я использовал это, чтобы исправить свой код, за исключением того, что я полностью избавился от синтаксиса ‘controller as’, чтобы не запутаться при использовании $ scope (т. Е. ng-controller =»namesController»). Я также заменил тег script, чтобы перенести мой пакет и angular локально. Это было действительно полезно для понимания того, как ng-repeat работает с контроллером.

Ответ №2:

Неправильный способ работы с ng-repeat.

<li ng-repeat="name in names">{{ name }}</li>

1. Большое спасибо за ответ! У меня была небольшая путаница в отношении итерации и синтаксиса ng-repeat. Я должен помнить, что мы назначаем «name» в качестве псевдонима для ссылки на свойство $ scope, которое мы хотим повторить. Итак, если бы у меня было что-то вроде… $scope.person = [{имя: «Bud», возраст: «21»}, {имя: «Spock», возраст: «162»}] … в моем HTML я бы написал… <li ng-repeat=»person in person»>имя:{{person.name }} возраст: {{person.age}} </li> Теперь все намного яснее. 🙂

Ответ №3:

Ваш код в беспорядке.

Ваш контроллер упоминается как namesCtrl в вашем шаблоне, но вы назначаете его names $scope . Выберите один подход и придерживайтесь его
Вы повторяетесь namesCtrl ?
Ваши записи массива являются только строками, у них нет name свойства

Используйте $scope …

 <ul ng-controller="namesController">        
    <li ng-repeat="name in names track by $index">{{name}}</li>  
</ul>

или используйте «контроллер как»

 app.controller('namesController', function() {
    this.names = ["jeff", "jim", "jay", "Please show up"];
});

 <ul ng-controller="namesController as namesCtrl">        
    <li ng-repeat="name in namesCtrl.names track by $index">{{name}}</li>  
</ul>

1. Огромное спасибо! Я просмотрел слишком много руководств, в которых использовались разные подходы, и я перепутал синтаксис ‘controller as’ и $scope. Кроме того, вы здорово прояснили это для меня.

2. Огромное спасибо! Я просмотрел слишком много руководств, в которых использовались разные подходы, и я перепутал синтаксис ‘controller as’ и $scope. Кроме того, внутри ng-repeat я запутался, думая, что итерация будет проходить по всему внутри контроллера, а не только по xxxxx в «$ scope.xxxxx». Вы потрясающе прояснили это для меня!

Ответ №4:

Изменен ваш код. Есть несколько ошибок. попробуйте это

 <!DOCTYPE html>
<html ng-app="showNames">
<head>
<script src="./js/bundle.js"></script>
<title> Help </title>
</head>

<body>
 <div ng-controller="namesController as namesCtrl">
  <h1>Show Those Names</h1>
    <ul>        
      <li ng-repeat="name in names">{{name}}</li>  
    </ul> 
 </div>    
</body>

</html>

Ваш app.js все в порядке. Я надеюсь, что это выталкивается в bundle.js