javascript - Angular : Why is my div not showing/hiding with ng-show/ng-hide?

Question

我正在尝试为一些图片制作一个 super 简单的灯箱。基本上我有一个 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 确实会创建一个原型(prototype)继承的子作用域。因此，在创建子作用域时，object 值通过子作用域内的引用传递，但原始类型值只是传递初始值。当基元类型值(此处 showme)在子范围内被修改时，该变量在子范围内创建一个新副本(当 ng-click 内部 ng- repeat 更改 showme 的值，它将是 showme 的新变量副本)。您可以借助引用类型 objects 来解决此类问题。

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

此外，您还必须将 ng-repeat 移动到上面的一个步骤，以便 photo 对象将在 inner ng 中可用-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>