Question

嗨，我正在做角度教程，我正在动态制作一个列表。但是当我尝试制作物品清单时，物品就不会出现

index.html

    <!doctype html>
    <html lang="en" ng-app="phonecatApp">
    <head>
    <meta charset="utf-8">
    <title>Google Phone Gallery</title>
    <link rel="stylesheet" href="css\app.css">
 <link rel="stylesheet" href="css/bootstrap.css">
 <script src="lib/angular/angular.js"></script>
  <script src="js\controllers.js"></script>
 </head>
 <body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
  <div class="span2">
    <!--Sidebar content-->

    Search: <input ng-model="query">

  </div>
  <div class="span10">
    <!--Body content-->

   <ul class="phones">
      <li ng-repeat="phone in phones | filter:query">
        {{phone.name}}
        <p>{{phone.snippet}}</p>
      </li>
    </ul>

  </div>
  </div>
  </div>

 </body>
 </html>

Javascript

 'use strict';

 /* Controllers */

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

 $phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope) {
 $scope.phones = [
 {'name': 'Nexus S',
  'snippet': 'Fast just got faster with Nexus S.'},
 {'name': 'Motorola XOOM™ with Wi-Fi',
  'snippet': 'The Next, Next Generation tablet.'},
{'name': 'MOTOROLA XOOM™',
  'snippet': 'The Next, Next Generation tablet.'}
  ];
});

我最初认为这是一个位置问题，但位置是正确的，我通常在导入javascript时遇到问题，我通常在同一页面上编写javascript代码，但我试图阻止这种习惯。有小费吗？

Answer 1

Slash走错路

"js\controllers.js"

到

"js/controllers.js"

Answer 2

您不希望在此行之前添加$：

$phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)

你想：

phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)

这是改变这个变化的工作小提琴：http://jsfiddle.net/rbQry/

编辑：声音也像这个<script>没有指向angular：

<script src="lib/angular/angular.js"></script>

请尝试使用：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>

Answer 3

除了tymeJV，11684和KayakDave的反应，

<link rel="stylesheet" href="css\app.css">

应该是

<link rel="stylesheet" href="css/app.css">

Answer 4

tymeJV可能是正确的，但我发现了别的东西。

您首先按如下方式初始化您的应用：

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

但是，然后，您尝试将其引用为$phonecatApp，这是（从JS的角度来看）完全不相关的东西：非初始化（和未声明的）符号。删除$符号（并更改斜杠）就可以了。

注意：使用控制台可以很容易地捕获这种错误。在Firefox，Chrome和Safari（不是 IE）等浏览器中，您可以在页面的某个位置按住Ctrl键单击（或右键单击Windows），这将显示inspect element窗格（这是非常有用）。应该有一个选项console。如果单击它，您会找到一个JavaScript的REPL以及所有发生的错误的列表，并带有行号。

啊，似乎KayakDave打败了我。我会在这里留下答案。

角度教程;无法从javascript中读取

4 个答案: