Question

我试图按照一个AngularJS图库的简单示例。我试图关注此视频：https://www.youtube.com/watch?v=tKe25THBoF4但只能在http://174.6.222.12/angular/处找到一个空页面，我的html看起来像：

<!DOCTYPE HTML>
<html ng-app>
<head>
  <script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
  <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="album.js"></script>
  <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
  <title>Angular Album</title>
</head>
<body>
<div ng-controller="AlbumCtrl">
  <div id="thumbWrapper">
    <ul id="thumbList">
      <li ng-repeat="image in images">
    <img src="{{image.thumbnail}}" alt="{{image.description}}">
      </li>
    </ul>
  </div>
</div>
</body>
</html>

而album.js看起来像这样：

 function AlbumCtrl($scope) {
   $scope.images = {
     {image : 'img/location.png', thumbnail : 'img/location.png', description : 'location'}
     {image : 'img/map.png', thumbnail : 'img/map.png', description : 'map'}
     {image : 'img/info.png', thumbnail : 'img/info.png', description : 'info'}
     {image : 'img/calendar.png', thumbnail : 'img/calendar.png', description : 'calendar'}
 }

为什么我没有看到任何事情？我错过了什么？：○

编辑

篮球，是的，但是我现在在大括号的末尾切换大括号，但仍然没有按预期工作，firebug仍然在专辑的第6行抱怨Uncaught SyntaxError: Unexpected end of input。 JS ... 对于<img src="{{image.thumbnail}}" alt="{{image.description}}">也改变了<img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> ...但没有运气，仍然... :( 事实上，我firebug上的localhost说明了这一点：

Error: Argument 'AlbumCtrl' is not a function, got undefined
    at assertArg (https://code.angularjs.org/angular-1.0.0rc4.min.js:1014:17)
    at assertArgFn (https://code.angularjs.org/angular-1.0.0rc4.min.js:1026:3)
    at https://code.angularjs.org/angular-1.0.0rc4.min.js:4463:9
    at https://code.angularjs.org/angular-1.0.0rc4.min.js:4098:17
    at forEach (https://code.angularjs.org/angular-1.0.0rc4.min.js:128:20)
    at compositeLinkFn (https://code.angularjs.org/angular-1.0.0rc4.min.js:4077:11)
    at linkingFn (https://code.angularjs.org/angular-1.0.0rc4.min.js:3793:14)
    at linkingFn (https://code.angularjs.org/angular-1.0.0rc4.min.js:3796:12)
    at linkingFn (https://code.angularjs.org/angular-1.0.0rc4.min.js:3796:12)
    at https://code.angularjs.org/angular-1.0.0rc4.min.js:3705:24 angular-1.0.0rc4.min.js:5355
(anonymous function) angular-1.0.0rc4.min.js:5355
(anonymous function) angular-1.0.0rc4.min.js:4550
Scope.$apply angular-1.0.0rc4.min.js:7478
(anonymous function) angular-1.0.0rc4.min.js:971
invoke angular-1.0.0rc4.min.js:2726
bootstrap angular-1.0.0rc4.min.js:969
angularInit angular-1.0.0rc4.min.js:948
(anonymous function) angular-1.0.0rc4.min.js:14050
trigger angular-1.0.0rc4.min.js:1713
(anonymous function) angular-1.0.0rc4.min.js:1938
forEach angular-1.0.0rc4.min.js:121
eventHandler angular-1.0.0rc4.min.js:1937

所以它根本不开心......

编辑B

啊，现在有事了！

Answer 1

您应该直接使用ng-src="{{image.thumbnail}}"而不是src。

编辑：

你的控制器需要有令人厌恶的代码，正如@ dheerajmanju1所说：

function AlbumCtrl($scope) {
  $scope.images = [
    {image : 'img/location.png', thumbnail : 'img/location.png', description : 'location'}
    {image : 'img/map.png', thumbnail : 'img/map.png', description : 'map'}
    {image : 'img/info.png', thumbnail : 'img/info.png', description : 'info'}
    {image : 'img/calendar.png', thumbnail : 'img/calendar.png', description : 'calendar'}
  ];
}

Answer 2

图像似乎是一个对象，但在ng-repeat中你需要一个数组。

应该是

$scope.images = [{image : 'img/location.png', thumbnail : 'img/location.png', description : 'location'}....];

Answer 3

我错过了album.js中我的函数的结束花括号，修正了它并获得了我想要的显示。

全部谢谢！

AngularJS的简单画廊

3 个答案: