1

嗨，我正在做 Angular 教程，我已经完成了动态制作列表的步骤。但是当我尝试制作项目列表时，项目不会出现

索引.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，但我正试图停止这种习惯。有小费吗？

4

4 回答 4

2

斜线走错了路

"js\controllers.js"

至

"js/controllers.js"
于 2013-10-23T15:27:35.260 回答
2

您不希望$在此行之前出现：

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

你要：

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

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

编辑：听起来也像这样<script>不指向角度：

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

尝试使用：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
于 2013-10-23T15:30:38.893 回答
2

除了 tymeJV、11684 和 KayakDave 的回应，

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

应该

<link rel="stylesheet" href="css/app.css">
于 2013-10-23T15:40:13.857 回答
1

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

您首先像这样初始化您的应用程序：

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

但是，您尝试将其引用为$phonecatApp，即（从 JS 的角度来看）完全不相关的东西：一个未初始化（和未声明）的符号。通过删除$符号（并更改斜线），您应该没问题。

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

啊，看来 KayakDave 打败了我。我将把答案留在这里。

于 2013-10-23T15:33:47.173 回答