角度教程； 无法从javascript中读取
[英]Angular Tutorial; can't read from javascript
问题描述
Hi I'm doing the angular tutorial and I'm up to a step where I'm dynamically make a list. 
嗨，我正在做角度教程，现在我可以动态地列出清单。 But when I try to make the list of items, the items won't come up 但是当我尝试列出项目清单时，这些项目就不会出现
index.html 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>
the Javascript 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.'}
];
});
I originally thought it was a location problem but the location is right, I usually have problems importing javascript and I usually code the javascript on the same page but I'm trying to stop that habit. 我原本以为这是位置问题，但是位置正确，我通常在导入javascript时遇到问题，并且通常在同一页面上编写javascript的代码，但我正试图停止这种习惯。 Any tips? 有小费吗？
4 个解决方案
解决方案1
2 2013-10-23 15:27:35
Slash is going the wrong way 斜线走错了路
"js\controllers.js"
to 至
"js/controllers.js"
解决方案2
2 已采纳 2013-10-23 15:30:38
You don't want a $ before this line: 您在此行之前不需要$ ：
$phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)
You want: 你要：
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)
Here's a working fiddle with this change: http://jsfiddle.net/rbQry/ 这是进行此更改的有效方法： http : //jsfiddle.net/rbQry/
Edit: Sounds also like this <script> not point to angular: 编辑：听起来也像这个<script>不指向角：
<script src="lib/angular/angular.js"></script>
Try instead using: 尝试使用以下方法：
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
解决方案3
2 2013-10-23 15:40:13
In addition to responses by tymeJV, 11684 and KayakDave, 除了tymeJV，11684和KayakDave的回复外，
<link rel="stylesheet" href="css\app.css">
should be 应该
<link rel="stylesheet" href="css/app.css">
解决方案4
1 2013-10-23 15:33:47
tymeJV is probably correct, but I spotted something else. tymeJV可能是正确的，但我发现了其他问题。
You first initialize your app like this: 您首先要像这样初始化应用程序：
var phonecatApp = angular.module('phonecatApp', []);
But then, you try to reference it as $phonecatApp , which is, (from JS' perspective) something completely unrelated: a non-initialized (and non-declared) symbol. 但是，然后，您尝试将其引用为$phonecatApp ，这是（从JS的角度来看）完全不相关的东西：未初始化（ $phonecatApp声明）的符号。 By removing the $ sign (and changing that slash) you should be fine. 通过删除$符号（并更改该斜杠），您应该会满意。
A note: this kind of errors can be catched real easy with the console. 注意：使用控制台可以轻松发现此类错误。 In browsers like Firefox, Chrome and Safari ( not IE) you can ctrl-click (or right-click for Windows) somewhere on the page which will bring up the inspect element pane (which is very useful as well). 在诸如Firefox，Chrome和Safari（ 不是 IE）之类的浏览器中，您可以在页面上的某处按住ctrl单击（或右键单击Windows），这将弹出inspect element窗格（这也非常有用）。 There should be an option console . 应该有一个选项console 。 If you click it you find a REPL for JavaScript and a list of all occured errors, complete with line number. 如果单击它，则会找到JavaScript的REPL以及所有已发生错误的列表，并带有行号。
Ah, it seems KayakDave beat me. 啊，看来KayakDave击败了我。 I'll leave the answer here for the note. 我将答案留在这里作笔记。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.