Question

我是角度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>

CardsController.js

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

请有人解释为什么代码不起作用？

Answer 1

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 }];
};

Answer 2

我修改了你的代码及其工作。

<!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 }];
});

Answer 3

您需要为ng-app指定一个名称，因为它是空的，并且在较新版本中不推荐使用示例ng-app =“nameofyourapp”

Answer 4

首先请提供一个JSFiddle，问题可能在html标签内，你真的不需要标签内的xmlns但是你必须将其定义为：

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

为angularjs app提供身份也是一种很好的做法，例如：

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

将JS文件放在

的基础上也是一种很好的做法

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

在你的JS中你必须定义＆＃34; myApp＆＃34;：

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

在浏览器中打开错误窗口，以清楚地识别错误。

可能错误是在你的JS文件之前调用了angular，你应该试试这个：

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

祝你好运。

Angular JS：ng-repeat不起作用

4 个答案: