Опитвам се да следвам прост пример за галерия 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="/images/{{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
Обръчи, да, но аз смених къдравите скоби в края сега за скоби и все още не работи както се очаква, firebug все още се оплаква Uncaught SyntaxError: Unexpected end of input на ред 6 в album.js ... също се промени <img src="/images/{{image.thumbnail}}" alt="{{image.description}}"> за <img ng-src="/images/{{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
така че изобщо не е щастлив ...
редактирайте Б
А, имам нещо сега!
Отговори:
1 за отговор № 1Изглежда, че изображенията са обект, но при ng-repeat се нуждаете от масив.
Трябва да бъде
$scope.images = [{image : "img/location.png", thumbnail : "img/location.png", description : "location"}....];
1 за отговор № 2
Трябва да използвате ng-src="/images/{{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"}
];
}
0 за отговор № 3
Липсваше ми затварящата къдрава скоба за функцията ми в album.js, поправих това и получих дисплея, който исках.
Благодаря на всички!