Question

我有一个应用程序，当点击缩略图时，将打开一个模态并播放连接到缩略图的视频。当我打开这个模态时，我需要做的是在body标签中添加一个类，这样我就可以停止在模态后滚动的正文内容。

我使用 ng-click 激活 ng-show 和 ng-if 。问题是所有这些都在 ng-repeat 的范围内，而 ng-repeat 又位于视图内。我是Angular的新手，我们将不胜感激。

<div class="videos" ng-controller="modalCtrl">
  <ul>
    <li class="clear-fix" ng-repeat="video in filtered = videos | filter:search | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">


      <!-- THIS ACTIVATES THE MODAL WHEN CLICKED -->
      <div ng-click="showModal = !showModal" class="item-thumbnail float-left pointer" back-img="{{video.thumbnail}}">
      </div>


      <div class="item-details-container float-left">
        <div class="item-header">
          <div ng-click="showModal = !showModal" class="item-title pointer">
            <h3 class="underline">{{video.title}}</h3>
          </div>

          <div class="item-author pointer">
            <span>by: <a class="underline" ui-sref="{{video.author_link}}">{{video.author}}</a></span>
          </div>
        </div>

        <div class="item-description">
          <p>{{video.description.trunc(150)}}</p>
        </div>
      </div>



      <!-- THIS IS THE MODAL BACKGROUND COVER -->
      <div ng-show="showModal" class="modal-cover"></div>



      <!-- THIS IS THE MODAL -->
      <div ng-show="showModal" class="modal-container">
        <div ng-if="showModal" class="video-modal clear-fix">
          <button class="btn-close" ng-click="$parent.showModal = false">
            <span></span>
            <span></span>
          </button>

          <div class="video-container float-left">
            <youtube-video video-url="video.url"></youtube-video>
          </div>

          <div class="video-info-container float-right">
            <div class="video-info">
              <div class="item-header">
                <div class="item-title">
                  <h3>{{video.title}}</h3>
                </div>

                <div class="item-author pointer">
                  <span>by: <a class="underline" ui-sref="{{video.author_link}}">{{video.author}}</a></span>
                </div>
              </div>

              <div class="item-description">
                <p>{{video.description}}</p>
              </div>
            </div>

            <div class="voting-container clear-fix">
              <div class="votingButton btn-solid pointer" ng-click="upVote(video); showDetails = !showDetails">
                <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
              </div>
              <div class="bugButton btn-solid pointer">
                <i class="fa fa-flag-o" aria-hidden="true"></i>
              </div>
              <div ng-show="showDetails = showDetails"><span>Thank you for voting.</span></div>       
            </div>
          </div>
        </div>
      </div>
    </li>
  </ul>
</div>

Answer 1

以下是您需要做的事情：

你可以在你的身体标签中使用ng-class

<body ng-class="{'is-modal-open': freeze}">

你可以像这样写点击你的缩略图

<div class="thumbnail" ng-click="is-modal-open=true"></div>

Answer 2

您可以在模板中创建一个div：

<div class="fullscreen-modal">
//content here
</div>

在你的控制器中你可以这样做：

var elementResult = element[0].getElementsByClassName('fullscreen-modal');
angular.element(document.body).append(element);

现在，您的元素是<body>的直接子元素。

或

在ng-repeat之外定义模态div。

然后定义范围函数

$scope.openModal() = function(contentOrVideoId) { //put logic here $scope.showModal = true; $scope.modalContent = contentOrVideoId; }

只需使用ng-click="openModal('IdOrContent')"
在ng-repeat中调用此函数

Answer 3

您正在寻找ngClass指令。

因此，如果您要将此元素添加到要禁用滚动的body元素，它会为您提供所需内容：

<div ng-class="{'is-modal-open': showModal}">

简而言之，这会在is-modal-open验证showModal

时添加课程true

为了澄清（感谢@Ronnie），您需要确保包含您所谓的<div>的{{1}}位于您的控制器范围内（div中某个位置{{1} }}）。而且你不应该直接把它放在body标签

上

[编辑] 我不喜欢使用ng-controller，但你可以试试这个：

<body>

Angular从内部视图向类添加类

3 个答案: