Angularjs 从内部视图向实体添加类
我有一个应用程序，当点击缩略图时，一个模式将打开并播放连接到缩略图的视频。我需要做的是在这个模式打开时向body标签添加一个类，这样我就可以停止在模式后面滚动body内容 我正在使用ng单击来激活ng显示和ng if。问题是所有这些都在ng repeat的范围内，而ng repeat又在视图的范围内。我是新来的，任何帮助都将不胜感激Angularjs 从内部视图向实体添加类,angularjs,html,Angularjs,Html,我有一个应用程序，当点击缩略图时，一个模式将打开并播放连接到缩略图的视频。我需要做的是在这个模式打开时向body标签添加一个类，这样我就可以停止在模式后面滚动body内容 我正在使用ng单击来激活ng显示和ng if。问题是所有这些都在ng repeat的范围内，而ng repeat又在视图的范围内。我是新来的，任何帮助都将不胜感激 <div class="videos" ng-controller="modalCtrl"> <ul> <li class
<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>
-
{{video.title}
作者：{{video.author}
{{video.description.trunc（150）}
{{video.title}
作者：{{video.author}
{{video.description}
谢谢你的投票。
<div ng-class="{'is-modal-open': showModal}">
您可以在模板中创建一个div，如下所示：
<div class="fullscreen-modal">
//content here
</div>
$scope.openModal() = function(contentOrVideoId)
{
//put logic here
$scope.showModal = true;
$scope.modalContent = contentOrVideoId;
}
只需在ng repeat中调用此函数，并使用
ng click=“openModal（'IdOrContent'）”<body ng-class="{'is-modal-open': freeze}">
<div class="thumbnail" ng-click="is-modal-open=true"></div>
<body ng-class="{'is-modal-open': freeze}">
<div class="thumbnail" ng-click="is-modal-open=true"></div>