Angular：为什么我的div不是showing/hiding而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-repeat 的 ng-click 更改 [=13= 的值时] 它将是 showme) 的新变量副本。您可以通过参考类型 objects.

的帮助来解决此类问题

这里你可以做的是，将 showme 属性作为外部 ng-repeat 的一部分，其中 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>

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>

Angular：为什么我的div不是showing/hiding而ng-show/ng-hide？

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

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click

ng-show