您好,我正在做 Angular 教程,我已经完成了动态创建列表的步骤。但是当我尝试制作项目列表时,项目不会出现
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 代码,但我正在努力停止这种习惯。有小费吗?
最佳答案
你不想要 $
在此行之前:
$phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)
你想要:
phonecatApp.controller('PhoneListCtrl', function PhoneListCtrl($scope)
这里有一个关于这个变化的工作 fiddle :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>
关于javascript - Angular 教程;无法从javascript读取,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19545895/