带有 AngularJS 的简单画廊答案

【问题标题】：simple gllery with AngularJS带有 AngularJS 的简单画廊
【发布时间】：2014-06-04 16:14:36
【问题描述】：

我正在尝试遵循 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'}
 }

为什么我什么都没看到？我错过了什么？ :o

编辑 A

Hoops，是的，但是我现在将末尾的大括号换成了大括号，但它仍然无法按预期工作，firebug 仍然在album.js 的第6 行抱怨Uncaught SyntaxError: Unexpected end of input... 也将<img src="{{image.thumbnail}}" alt="{{image.description}}"> 更改为<img ng-src="{{image.thumbnail}}" alt="{{image.description}}"> ...但没有运气，仍然... :( 事实上，我的localhost 上的firebug 是这样说的：

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

啊，现在有东西了！

【问题讨论】：

标签： javascript html angularjs dom

【解决方案1】：

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

应该是

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

【讨论】：

【解决方案2】：

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

编辑：

您的 Controller 需要具有 @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'}
  ];
}

【讨论】：

哎呀，是的，但我还没有让它工作，请参阅上面的 editA。

【解决方案3】：

我在album.js 中缺少我的函数的右大括号，已修复该问题并获得我想要的显示。

谢谢大家！

【讨论】：