内側のビューからボディへの角度追加クラス

-2

サムネイルをクリックすると、モーダルが開きサムネイルに接続されたビデオが再生されます。私がする必要があるのは、このモーダルが開いているときにボディタグにクラスを追加することです。そのため、モーダルの背後でスクロールするボディコンテンツを停止できます。内側のビューからボディへの角度追加クラス

私はNG-ショーとNG-場合をアクティブにするためにをクリックNGを使用しています。この問題はすべて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">  <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>  <div ng-show="showModal" class="modal-cover"></div>  <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>

出典

2016-11-23 Old Gill

** **あなたのアプリの外にあるクラスを本体に追加する必要があるのはなぜですか？ –

モバイル画面では、モーダルコンテンツをスクロールする必要があります。 2つのスクロールバーが表示されないようにするには、モーダルが開いているときにボディオーバーフローを非表示に設定する必要があります。ボディーはビューの外側にあり、アプリとメインコントローラーの外側にはありません。 –

-2

ngClass指示文を探しています。

ですから、あなたがスクロールを無効にしたいbody要素にこれを追加した場合、それはあなたが探しているもの、あなたを与えるだろう。要するに

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

、これはクラスを追加しますis-modal-openときshowModalを検証true

にジャスト（感謝@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; 
    }; 
}]);

出典

2016-11-23 17:21:18 AlexD

私は問題がボディー・タグが彼のコントローラーの範囲外であると思う – Ronnie

彼はボディー・タグにそのクラスを直接追加しようとは思わないが、私は説明を追加するよ – AlexD

はいクラスを追加する必要があるng-repeatとビューの範囲外にあるbodyタグ。 –

-1

あなたは自分のテンプレートでのdivを作ることができますこのように：

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

：

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

そして、あなたのコントローラで、あなたはこれを行うことができます

あなたの要素は<body>の直接の子です。

NGリピートの外でモーダルのdivを定義します。

次にスコープ機能を定義

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

そして、ちょうどng-click="openModal('IdOrContent')"

出典

2016-11-23 17:22:26 EscapeNetscape

私はこれを試しますが、モーダルがng-repeatの内側にあることを考慮すると、このメソッドはng-repeta内のすべての要素に対してモーダルを追加しませんか？ –

クラス名で要素を選択すると、これが当てはまる可能性があります。 class = "modal-no - {{key}}"のような動的なクラス名を作ることができます...私はモーダルのためのディレクティブを作るより良い方法を意味します。 – EscapeNetscape

あるいは、ng-repeatの外側でmodal-divを定義してから、ロジックを気にする関数を呼び出すことができます。 – EscapeNetscape

でNGリピート内でこの関数を呼び出すここであなたがする必要があるものです：

あなたはあなたの中にNG-クラスを使用することができますこのようなボディタグ

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

あなたはng-このようなサムネイルをクリックしてください

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

出典

2016-11-23 17:49:27

内側のビューからボディへの角度追加クラス

答えて

関連する問題