从内部视图角度将类添加到正文答案

【问题标题】：Angular add class to body from inside view从内部视图角度将类添加到正文
【发布时间】：2016-11-24 01:59:57
【问题描述】：

我有一个应用程序，当单击缩略图时，模式将打开并播放连接到缩略图的视频。我需要做的是在此模式打开时向正文标记添加一个类，以便我可以停止正文内容在模式后面滚动。

我正在使用 ng-click 来激活 ng-show 和 ng-if。问题是所有这些都在 ng-repeat 的范围内，而 ng-repeat 又在 view 内。我是 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>

【问题讨论】：

为什么您需要在正文中添加一个类 - 它在您的应用程序之外？
在移动屏幕上，模态内容需要滚动。为了防止出现两个滚动条，我需要在模式打开时将正文溢出设置为隐藏。主体在视图之外，而不是应用程序和主控制器。

标签： angularjs html

【解决方案1】：

这是你需要做的：

你可以像这样在你的body标签中使用ng-class

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

你可以像这样在你的缩略图上写 ng-click

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

【讨论】：

【解决方案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-repeat 中使用 ng-click="openModal('IdOrContent')" 调用此函数

【讨论】：

我会尝试这个，但考虑到模态在 ng-repeat 内，这种方法不会为 ng-repeta 内的每个元素附加模态吗？
如果您按类名选择元素，可能就是这种情况。但是您可以创建一个动态类名，例如 class="modal-no-{{key}}" ...我的意思是更好的方法是为模态创建一个指令。
或者你可以在 ng-repeat 之外定义 modal-div，然后调用一个处理逻辑的函数。

【解决方案3】：

您正在寻找ngClass 指令。

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

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

简而言之，当showModal 验证到true 时，这将添加类is-modal-open

为了澄清（感谢@Ronnie），您需要确保包含您所称的body 的<div> 在您的控制器范围内（在具有ng-controller 的div 内的某个位置）。而且你不应该直接把它放在<body>标签上

[编辑] 我不喜欢使用$rootScope，但你可以试试这个：

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

// Your div
<div ng-click="showHideModal()" class="item-title pointer">

// your controller
app.controller('modalCtrl', ['$scope', '$rootScope', function($scope, $rootScope) {
    $scope.showHideModal = function() {
        $rootScope.showModal = !$rootScope.showModal;
    };
}]);

【讨论】：

我认为问题是身体标签超出了他的控制器范围
我希望他不是想直接在body标签上添加那个类，但我会添加一个澄清
是的，我需要向 body 标记添加一个类，该类超出了 ng-repeat 和视图的范围。
它很讨厌，我不喜欢它，但你可以更新 $rootScope 代替。我编辑了我的答案
这很好用 AlexD 谢谢。你能告诉我为什么这是一个不好的方法吗？这会给我带来其他问题吗？