Angularjs 正在尝试获取图像库中的图像以在单击时展开

尝试获取选定的单击图像以在图像库中展开。我有扩展工作，但它只工作在第一个图像集。如果单击集合中的另一个图像，则第一个图像就是展开的图像

    <div ng-repeat="album in albumData|filter:q" id="thumbWrapper">
            <h1>{{album.id}}</h1> 
            <h2 ng-click="showme = !showme">{{album.title}}</h2>
            <div id="thumbList"ng-show="showme"class="albumContent">
                <ul ng-controller="PhotoCtrl" id="thumbList">
                    <li ng-repeat="photo in photoData" ng-if="album.userId == photo.albumId">
                        <img id="view" ng-click="zoom()" ng-src={{photo.url}}>
                    </li>
                </ul>
            </div>
        </div>
    </div>

---

任何帮助都会很棒

使每个img标签的图像id唯一

<img id="view{{$index}}" ng-click="zoom($index)" ng-src={{photo.url}}>

---

并将缩放功能放在http请求的一侧

使每个img标记的图像id唯一

<img id="view{{$index}}" ng-click="zoom($index)" ng-src={{photo.url}}>

---

并将缩放功能放在http请求的一侧

您可以尝试此目录。只需将此代码复制并粘贴到app.js中，将css代码复制并粘贴到style.css中即可。但要小心，这适用于您网站中的所有图像

.directive('img', function ($window) {
    'use strict';

    function getElementOffset (element) {
        var de = document.documentElement;
        var box = element.getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    }

    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            var expanded = false,
                cloned = element.clone(true),
                offset = getElementOffset(element[0]);
            cloned.addClass('large');
            cloned.attr('src', attr.src);
            cloned.css('top', offset.top + 'px');
            cloned.css('left', offset.left + 'px');
            cloned.bind('click', function () {
                if (expanded) {
                    cloned.removeClass('expanded');
                    expanded = false;
                } else {
                    cloned.addClass('expanded');
                    expanded = true;
                }
            });
            element.parent().append(cloned);
            angular.element($window).bind('scroll', function () {
                if (expanded) {
                    cloned.removeClass('expanded');
                    expanded = false;
                }
            });
        }
    };
});

CSS:

---

来源：

您可以尝试此目录。只需将此代码复制并粘贴到app.js中，将css代码复制并粘贴到style.css中即可。但要小心，这适用于您网站中的所有图像

.directive('img', function ($window) {
    'use strict';

    function getElementOffset (element) {
        var de = document.documentElement;
        var box = element.getBoundingClientRect();
        var top = box.top + window.pageYOffset - de.clientTop;
        var left = box.left + window.pageXOffset - de.clientLeft;
        return { top: top, left: left };
    }

    return {
        restrict: 'E',
        link: function (scope, element, attr) {
            var expanded = false,
                cloned = element.clone(true),
                offset = getElementOffset(element[0]);
            cloned.addClass('large');
            cloned.attr('src', attr.src);
            cloned.css('top', offset.top + 'px');
            cloned.css('left', offset.left + 'px');
            cloned.bind('click', function () {
                if (expanded) {
                    cloned.removeClass('expanded');
                    expanded = false;
                } else {
                    cloned.addClass('expanded');
                    expanded = true;
                }
            });
            element.parent().append(cloned);
            angular.element($window).bind('scroll', function () {
                if (expanded) {
                    cloned.removeClass('expanded');
                    expanded = false;
                }
            });
        }
    };
});

CSS:

---

源代码：

hi我在使用此代码后单击激发时遇到此错误：ReferenceError:index未定义在fn（编译时求值（angular.min.js:239）、：4:210、e（angular.min.js:284）、b.$eval（angular.min.js:148）、b.$apply（angular.min.js:149）和HTMLImageElement。（angular.min.js:284）在hg（angular.min.js:39）在HTMLImageElement.d（angular.min.js:39）你是否在html和js中都将索引参数传递给函数？是的，我在html:和js:$scope.zoom=function（）{var elem=“view”+index；var imageId=document.getElementById（'elem'）；如果（imageId.style.width==“1000px”）{imageId.style.width=“600px”；imageId.style.height=“600px”}其他{imageId.style.width=“1000px”}；和js类似的

$scope.zoom=function（index）{

哦！不，没有这样做哈哈，现在试试看：）您好，我在使用此代码后单击激发时遇到此错误：ReferenceError:索引未在fn的b$scope.zoom（album.js:15）处定义（编译时求值（angular.min.js:239），：4:210）在e（angular.min.js:284）在b$eval（angular.min.js:148）在b.$apply（angular.min.js:149）在HTMLImageElement.（angular.min.js:284）在hg（angular.min.js:39）和HTMLImageElement.d（angular.min.js:39）中，您是否在html和js中都将索引参数传递给函数？是的，我在我的html:和js:$scope.zoom=function（）{var elem=“view”+index；var imageId=document.getElementById（'elem'）；if（imageId.style.width==“1000px”）{imageId.style.width=“600px”imageId.style.height=“600px”}还有{imageId.style.width=“1000px”}；还有像这样的js

$scope.zoom=function（index）{

哦！不，哈哈，现在试试看：）

.app img {
display: block;
float: right;
width: 200px;
}

.app img.large {
cursor: -moz-zoom-in; 
cursor: -webkit-zoom-in; 
cursor: zoom-in;
position: absolute;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}

.app img.expanded {
cursor: -moz-zoom-out; 
cursor: -webkit-zoom-out; 
cursor: zoom-out;
left: 0 !important;
top: 0 !important;
width: 100%;
}