角度:为什么我的 div 没有使用 ng-show/ng-hide 显示/隐藏?

Question

我正在尝试为某些图像制作一个超级简单的灯箱。基本上，我有一个div，其中包含使用ng-repeat显示的一组图像，并且当单击其中一个图像时，我想显示一个灯箱div。我不知道为什么我的灯箱div 不会出现。这是我的代码：

angular.module('myApp')
.controller('PhotosCtrl', ['$scope', function PhotosCtrl($scope){
	$scope.photos = [
		{
			src: '/images/img1.png',
			caption: ' '
		},
		{
			src: '/images/img2.png',
			caption: ' '
		}
	];
	$scope.larges = [
		{
			src: '/images/img1-lg.png',
			caption: ' '
		},
		{
			src: '/images/img2-lg.png',
			caption: ' '
		}
	];
}]);

.photowrap{
	max-width: 85%;
	margin: 0 auto;
	padding: 12px 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	background-color: #fff;
}
.photos{
	margin: 0;
}
.photo{
	max-height: 250px;
	border: 2px solid #EBEBEB;
	border-radius: 5px;
}
p.caption{
	display: none;
}
.lightbox{
	max-width: 85%;
	margin: 0 auto;
	background-color: rgba(255,255,255,0.6);
	position: absolute;
}
.lbphoto{
	max-width: 100%;
	max-height: 100%;
	display: block;
	margin: 0 auto;
}

<div ng-controller="PhotosCtrl" class="content">
<div class="photowrap">
<a href="" ng-repeat="photo in photos" ng-click="showme=true" class="photos">
<img ng-src="{{photo.src}}" class="photo img-responsive"/>
</a>
<div ng-show="showme" class="lightbox">
<a href="" ng-repeat="large in larges" class="photos">
<a ng-click="showme=false" class="close">x</a>
<img ng-src="{{large.src}}" class="lbphoto img-responsive"/>
</a>
</div>
</div>
</div>

谁能帮我弄清楚我做错了什么？

谢谢！

Answer 1

因为每次迭代时ng-repeat都会创建一个原型继承的子作用域。因此，在创建子作用域时，object值通过子作用域内的引用传递，但基元类型值只是传递到那里的初始值。当基元类型值(此处showme)在子作用域内被修改时，该变量会在子作用域内创建一个新副本(当ng-click内部ng-repeat输入showme的值时，它将是showme的新变量副本)。您可以通过借助参考类型objects来解决此类问题。

在这里，您可以做的是，showme属性作为photo元素的外部ng-repeat的一部分。通过它，您将确保您依赖于photo的参考object。

此外，您必须ng-repeat移动到上面的一个步骤，以便photo对象将在innerng-repeat内可用，目前两个ng-repeat在同一级别。

标记

<div ng-controller="PhotosCtrl" class="content">
<div class="photowrap" ng-repeat="photo in photos">
<a href="" ng-click="photo.showme=true" class="photos">
<img ng-src="{{photo.src}}" class="photo img-responsive"/>
</a>
<div ng-show="photo.showme" class="lightbox">
<a href="" ng-repeat="large in larges" class="photos">
<a ng-click="photo.showme=false" class="close">x</a>
<img ng-src="{{large.src}}" class="lbphoto img-responsive"/>
</a>
</div>
</div>
</div>

Answer 2

你的代码有两个问题：

1-ng-repeat创建一个子作用域，因此您必须使用.语法来设置变量，并在以后使用它。

2-您的ng-repeat在标签上a，因为您的ng-show在下面的div上，这意味着那里没有照片。你必须把你的ng-repeat提升一个层次。

所以：

<div ng-controller="PhotosCtrl" class="content">
<div class="photowrap" ng-repeat="photo in photos">
<a href="" ng-click="photo.showme=true" class="photos">
<img ng-src="{{photo.src}}" class="photo img-responsive"/>
</a>
<div ng-show="photo.showme" class="lightbox">
<a href="" ng-repeat="large in larges" class="photos">
<a ng-click="photo.showme=false" class="close">x</a>
<img ng-src="{{large.src}}" class="lbphoto img-responsive"/>
</a>
</div>
</div>
</div>