Angular JS: повтор не работает

Question

Angular JS: повтор не работает

0

Я новичок в угловой JS. И это первый раз, когда я написал немного кода, используя Angular JS, наблюдая за учебником. Но в этом видеоуроке код работает правильно, но мой код не работает. На моей веб-странице отображается пустая страница.

Index.html

<!DOCTYPE html>
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>MTG Browser</title>
    <link href="index.css" rel="stylesheet" />
    <script src="angular.min.js"></script>
    <script src="CardsController.js"></script>
</head>
<body ng-controller="cardsListController">
    <div id="cardsList">
        <div ng-repeat="card in cards" class="cardItem">
            Card {{card.id}}
        </div>
    </div>
</body>
</html>

И CardController.js

var cardsListController = function ($scope) {
    $scope.cards = [{ id: 1 }, { id: 2 }];
};

Пожалуйста, объясните, почему код не работает?

Noushadur Rahman Shoukhin 29 июнь 2015, в 14:40

Источник

Теги:

javascript

angularjs

4 ответа

2

Html

<html ng-app="myApp">
<head>
    <title>MTG Browser</title>
   <link href="index.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="cardsListController">
<div id="cardsList">
    <div ng-repeat="card in cards" class="cardItem">
        Card {{card.id}}
        </div>
</div>
</body>
</html>

и.js

angular.module('myApp', []);
var cardsListController = function ($scope) {
$scope.cards = [{ id: 1 }, { id: 2 }];
};

Amay Kulkarni 29 июнь 2015, в 10:06

0

вам нужно назначить имя для своего ng-приложения, поскольку оно пустое, и это устарело в примерах новых версий ng-app = "nameofyourapp"

Taha Amine Zeghbib 29 июнь 2015, в 10:38

0

Во-первых, предоставьте JSFiddle, проблема может быть в теге html, вам действительно не нужны xmlns в теге, но если вы должны определить его как:

      <html ng-app xmlns:ng="http://www.w3.org/1999/xhtml">

Также хорошей практикой является предоставление идентичности для приложения angularjs, например:

      <html ng-app="myapp" xmlns:ng="http://angularjs.org">

Также рекомендуется использовать JS файлы в базе

  <script src="angular.min.js"></script>
  <script src="CardsController.js"></script>
</body>

В вашем JS вы должны определить "myApp":

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

Откройте окно ошибки в своем браузере, чтобы четко определить ошибку.

Возможно, ошибка заключается в том, что угловой вызов вызывается перед вашим JS файлом, вы должны попробовать следующее:

  <script src="CardsController.js"></script>
  <script src="angular.min.js"></script>
</body>

Удачи.

Jammi 29 июнь 2015, в 10:15

Ещё вопросы

amarjeet kumar · Accepted Answer · 2015-06-29T11-02-00.000Z

Я изменил ваш код и его работу.

<!DOCTYPE html>
<html>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="CardsController.js"></script>
<body>
<div  ng-app="myApp" ng-controller="cardsListController" id="cardsList">
    <div ng-repeat="card in cards" class="cardItem">
        Card {{card.id}}
    </div>
</div>

CardsController.js

var app = angular.module('myApp', []);
app.controller('cardsListController', function($scope) {
 $scope.cards = [{ id: 1 }, { id: 2 }];
});

Более ранние версии Angular давали возможность назначать функции контроллера глобальной области, как вы это делали. Затем эта способность была снята с угловой. Тем не менее, есть еще много уроков, которые ссылаются на этот старый стиль. Я заменил на angular legacy и твой код работает. Поэтому в будущем вам нужно объявить угловой модуль и зарегистрировать свой контроллер против него.