I have a modal that does scrolling when the contents of the window is larger on the screen ..., I would like to put a different class when the modal scrolling was active, in the example below it changes the class even without scrolling:
My modal controller:
app.controller("ModalController", ["$scope", "$uibModal",
function($scope, $uibModal) {
$scope.verifyScroll = function() {
var doc = $(document).height(); //gostaria de saber aqui qual elemento eu devo capturar baseado no html abaixo?
var win = $(window).height();
$scope.scroll_option = (doc > win) ? 'scrolling' : '';
};
}]);
HTML rendered modal:
<div uib-modal-window="modal-window" class="modal fade ng-scope ng-isolate-scope in" role="dialog" size="detalhes not-observation" index="0" animate="animate" ng-style="{'z-index': 1050 + $$topModalIndex*10, display: 'block'}" tabindex="-1" uib-modal-animation-class="fade" modal-in-class="in" modal-animation="true" style="z-index: 1050; display: block;"><div class="modal-dialog modal-detalhes not-observation"><div class="modal-content" uib-modal-transclude="">
<div class="bg-close-modal ng-scope" ng-click="cancel();hideTooltip()"></div>
<div class="modal-detalhes-block ng-scope active" ng-class="{active:(content.dados.show_assign_task == true || nextPageTarefa == true || (role_user == 'STUDENT' && content.dados.indicacao ) )}" style="">
<div class="space elastic-close">
<button type="button" class="close close-modal" ng-click="cancel();hideTooltip()" title="Fechar" aria-label="Fechar">
<i class="fa fa-times" aria-hidden="true"></i>
</button>
</div>
<!-- modal: (coluna direita ou única) -->
<!-- ngIf: role_user == 'STUDENT' && content.dados.indicacao && !content.dados.show_assign_task -->
<!--INICIO - INDICACAO (coluna esquerda - aba aberta) - passo 1 -->
<!-- ngIf: (role_user != 'STUDENT' && content.dados.indicacao) || (content.dados.show_assign_task && !nextPageTarefa) --><div ng-style="{'min-height':heightModal}" ng-if="(role_user != 'STUDENT' && content.dados.indicacao) || (content.dados.show_assign_task && !nextPageTarefa)" ng-hide="nextPageTarefa" class="col-xs-12 col-sm-8 col-md-8 col-lg-8 bg-grey-light content-left ng-scope" style="min-height: 621px;">
<div class="modal-header">
<span class="title-header-modal"><i class="task-icon-title"></i><!-- ngIf: !content.dados.indicacao --><h1 ng-if="!content.dados.indicacao" class="title-header ng-binding ng-scope" style=";margin-left:-15px;" ng-bind-html="content.form_task.task_title">Atribuir tarefa</h1><!-- end ngIf: !content.dados.indicacao --></span>
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' --><span ng-if="role_user != 'STUDENT'" ng-bind-html="messagesIndication" class="ng-binding ng-scope"></span><!-- end ngIf: role_user != 'STUDENT' -->
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
<div class="row-one">
<label for="nomeIndicacao" ng-bind-html="content.form_task.label.title_task" class="ng-binding">Título da tarefa:</label>
<!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" ng-model="nome_indicacao" name="nomeIndicacao" id="nomeIndicacao" type="text" class="form-control ng-pristine ng-untouched ng-valid ng-scope ng-empty"><!-- end ngIf: !content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="date_start" ng-bind-html="content.form_task.label.date_start" class="ng-binding">Início:</label>
<!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" name="date_start" type="date" id="date_start" value="2018-08-10" class="form-control form-date date-indication ng-scope"><!-- end ngIf: !content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label for="date_end" ng-bind-html="content.form_task.label.date_end" class="ng-binding">Término:</label>
<!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" value="" ng-model="date_end" ng-blur="onChangeDateEnd(date_end)" name="date_end" type="date" id="date_end" class="form-control form-date date-indication ng-pristine ng-untouched ng-valid ng-scope ng-empty"><!-- end ngIf: !content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<label class="form-check-label">
<!-- ngIf: !content.dados.indicacao --><input ng-if="!content.dados.indicacao" name="status" type="checkbox" id="statusIndicacao" ng-true-value="'1'" ng-false-value="'0'" class="form-check-input ng-scope" ng-checked="true" checked="checked"><!-- end ngIf: !content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
<span class="txt-check ng-binding" ng-bind-html="content.form_task.label.task_status">Ativar tarefa</span>
<span class="xs-hidden">
<i class="fa fa-question-circle grey-info" uib-tooltip="A tarefa ficará visível para o aluno somente se esta opção estiver ativa" tooltip-trigger="none">
</i>
</span>
</label>
</div>
</div>
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
<!-- <hr class="line-title">-->
</div>
<div class="modal-body">
<span ng-show="content.dados.is_loading" class="loadingDataBox ng-hide"><br><br><img onerror="this.src='/webapp/sistema/img/v2-webapp/no_image.png'" src="/webapp/sistema/img/mini-loading-green.svg" class="text-center" border="0"><br><br><br><br><br><br><br><br><br><br><br><br><br></span>
<!-- ngIf: content.dados.atividades.length > 0 --><div ng-show="!content.dados.is_loading" class="no-padding resume ng-scope" ng-if="content.dados.atividades.length > 0">
<div class="clearfix margin-top-20">
<label ng-bind-html="content.form_task.label.select_activities" class="ng-binding">Selecione as atividades a serem atribuídas:</label>
<span class="xs-hidden" title="">
<i class="fa fa-question-circle grey-info" uib-tooltip="Clicando em uma ou mais opções abaixo, você habilita a edição da descrição para cada uma das atividades de sua tarefa." tooltip-trigger="none">
</i>
</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
<div ng-click="types.pre1=!types.pre1;displayTarefa(types.pre1, 'pre1')" class="bg-grey-box atividade-item the-indication atv-0 active" ng-class="{active:types.pre1}" style="">
<i class="association-icon"></i>
<span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pre_leitura_1">Pré<br>Leitura 1</span>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
<div ng-click="types.pre2=!types.pre2;displayTarefa(types.pre2, 'pre2')" class="bg-grey-box atividade-item the-indication atv-1 active" ng-class="{active:types.pre2}" style="">
<i class="quiz-icon"></i>
<span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pre_leitura_2">Pré<br>Leitura 2</span>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
<div ng-click="types.leitura=!types.leitura;displayTarefa(types.leitura, 'leitura')" class="bg-grey-box atividade-item the-indication atv-4 active" ng-class="{active:types.leitura}" style="">
<i class="caderno-leitura-icon"></i>
<span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.leitura">Leitura</span>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
<div ng-click="types.pos1=!types.pos1;displayTarefa(types.pos1, 'pos1')" class="bg-grey-box atividade-item the-indication atv-2" ng-class="{active:types.pos1}">
<i class="quiz-icon"></i>
<span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pos_leitura_1">Pós<br>Leitura 1</span>
</div>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 no-padding item-act-click">
<div ng-click="types.pos2=!types.pos2;displayTarefa(types.pos2, 'pos2')" class="bg-grey-box atividade-item the-indication atv-3" ng-class="{active:types.pos2}">
<i class="autoria-icon"></i>
<span class="leg-points ng-binding" ng-bind-html="content.form_task.buttons.pos_leitura_2">Pós<br>Leitura 2</span>
</div>
</div>
<div class="clearfix">
<p></p>
</div>
</div><!-- end ngIf: content.dados.atividades.length > 0 -->
<!--TEXTO-->
<div ng-show="types.pre1" class="col-xs-12 col-sm-12 col-md-12 no-padding resume" style="">
<label ng-bind-html="content.form_task.label.pre_leitura_1" class="ng-binding">Pré Leitura 1:</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
<textarea ng-focus="placeholderIndication.pre1 = ''" ng-blur="placeholderIndication.pre1 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pre1" name="pre-leitura-1" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
</div>
</div>
<!--TEXTO-->
<!--TEXTO-->
<div ng-show="types.pre2" class="col-xs-12 col-sm-12 col-md-12 no-padding resume" style="">
<label ng-bind-html="content.form_task.label.pre_leitura_2" class="ng-binding">Pré Leitura 2:</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
<textarea ng-focus="placeholderIndication.pre2 = ''" ng-blur="placeholderIndication.pre2 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pre2" name="pre-leitura-2" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
</div>
</div>
<!--TEXTO-->
<!--TEXTO-->
<div ng-show="types.leitura" class="col-xs-12 col-sm-12 col-md-12 no-padding resume" style="">
<label ng-bind-html="content.form_task.label.leitura" class="ng-binding">Leitura:</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
<textarea ng-focus="placeholderIndication.leitura = ''" ng-blur="placeholderIndication.leitura = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.leitura" name="texto" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
</div>
</div>
<!--TEXTO-->
<!--TEXTO-->
<div ng-show="types.pos1" class="col-xs-12 col-sm-12 col-md-12 no-padding resume ng-hide">
<label ng-bind-html="content.form_task.label.pos_leitura_1" class="ng-binding">Pós leitura 1:</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
<textarea ng-focus="placeholderIndication.pos1 = ''" ng-blur="placeholderIndication.pos1 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pos1" name="pos-leitura-1" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f7f7f7;height: 64px;width: 99%; overflow: auto;"></textarea>
</div>
</div>
<!--TEXTO-->
<!--TEXTO-->
<div ng-show="types.pos2" class="col-xs-12 col-sm-12 col-md-12 no-padding resume ng-hide">
<label ng-bind-html="content.form_task.label.pos_leitura_2" class="ng-binding">Pós leitura 2:</label>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding indication">
<textarea ng-focus="placeholderIndication.pos2 = ''" ng-blur="placeholderIndication.pos2 = placeholder" placeholder="Escreva aqui as instruções para os seus alunos." ng-model="tarefasProfessor.pos2" name="pos-leitura-2" class="box-text-teacher ng-pristine ng-untouched ng-valid ng-binding ng-empty" style=" resize: none;background: #f9f6f6;height: 64px;width: 97%; overflow: auto;"></textarea>
</div>
</div>
<!--TEXTO-->
<br>
</div>
<div class="clearfix block-bottom"></div>
</div><!-- end ngIf: (role_user != 'STUDENT' && content.dados.indicacao) || (content.dados.show_assign_task && !nextPageTarefa) -->
<!--FIM - INDICACAO-->
<!--INICIO - INDICACAO --passo 2 (coluna esquerda - aba aberta) -->
<!-- ngIf: nextPageTarefa -->
<!--FIM - INDICACAO passo 2 (coluna direita ou conteúdo principal) -->
<div class="col-xs-12 col-md-12 content-right content-indication col-sm-4 col-md-4 col-lg-4" ng-style="{'min-height':content.height_modal_op}" ng-class="{'col-xs-12 col-sm-4 col-md-4 col-lg-4 content-right content-indication':(content.dados.indicacao == true || content.dados.show_assign_task == true || nextPageTarefa == true), 'col-md-12 content-right content-indication':(!content.dados.indicacao)}" style="min-height: 586px;">
<div class="modal-header">
</div>
<div class="modal-body">
<div ng-class="{indication:types.leitura}" class="box-text-description indication" style="">
<!-- ngIf: content.dados.imagem_modal !== '' && content.dados.imagem_modal !== null --><span ng-if="content.dados.imagem_modal !== '' && content.dados.imagem_modal !== null" class="box-img-description ng-scope" ng-class="{'sem-selo':(role_user=='STUDENT' || (!content.dados.is_trade_edition && (content.dados.recomendado_para == null || content.dados.is_trade_edition)))}">
<!-- ngIf: role_user != 'STUDENT' --><div class="selo-box ng-scope" ng-if="role_user != 'STUDENT'">
<!-- ngIf: content.dados.recomendado_para != null && !content.dados.is_trade_edition && role_user!='STUDENT' --><span ng-if="content.dados.recomendado_para != null && !content.dados.is_trade_edition && role_user!='STUDENT'" class="recomendation ng-binding ng-scope">
<span ng-bind-html="content.dados.recomendado_para.title" class="ng-binding">Sugerido para:</span>
4º ano
</span><!-- end ngIf: content.dados.recomendado_para != null && !content.dados.is_trade_edition && role_user!='STUDENT' -->
<!-- ngIf: content.dados.is_trade_edition -->
</div><!-- end ngIf: role_user != 'STUDENT' -->
<!-- ngIf: types.leitura --><i ng-if="types.leitura" class="teacher-cap ng-scope" style=""></i><!-- end ngIf: types.leitura --><img onerror="this.src='/webapp/sistema/img/v2-webapp/no_image.png'" ng-src="https://gutennews.com.br/admin/uploader/uploads/232_image_5634995750.jpg"ng-click="openArticleIndication(content.dados)" class="img-responsive cursor-pointer" src="https://gutennews.com.br/admin/uploader/uploads/232_image_5634995750.jpg"></span><!--endngIf:content.dados.imagem_modal!==''&&content.dados.imagem_modal!==null--></div><h1ng-click="openArticleIndication(content.dados)" class="title-detalhes cursor-pointer ng-binding" ng-bind-html="content.dados.title">BICHARADA</h1>
<h3 class="subtitle-detalhes ng-binding" ng-bind-html="content.dados.subtitle">Crônica da Nathalie</h3>
<br>
<h4 class="title-edition ng-binding"><span ng-bind-html="content.title_edition + ' ' + content.dados.numero_edicao" class="ng-binding">Edição 139</span> | Publicado em 03/04/2018</h4>
<span ng-show="content.dados.is_loading" class="loadingDataBox ng-hide"><br><br><img onerror="this.src='/webapp/sistema/img/v2-webapp/no_image.png'" src="/webapp/sistema/img/mini-loading-green.svg" class="text-center" border="0"><br><br><br><br><br><br><br><br><br><br><br><br><br></span>
<div class="clearfix" ng-hide="content.dados.is_loading">
<!-- ngIf: role_user == 'STUDENT' || role_user == 'PARENT' || (content.dados.plano_aula_id == null || (content.dados.ops_plan_status == null && content.dados.plano_aula_id == null)) -->
<!-- ngIf: role_user != 'STUDENT' && role_user != 'PARENT' && (content.dados.plano_aula_id != null || content.dados.ops_plan_status == 1 || content.dados.ops_plan_status == 2) --><div class="text-center ng-scope" ng-if="role_user != 'STUDENT' && role_user != 'PARENT' && (content.dados.plano_aula_id != null || content.dados.ops_plan_status == 1 || content.dados.ops_plan_status == 2)">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 no-margin no-padding mobile-col-x-12">
<button class="btn btn-default btn-blue-plano-aula" ng-click="loadPlanoAulaSugestoes(300,content.dados)">Plano<br>de aula</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6 no-margin no-padding mobile-col-x-12">
<button class="btn btn-default btn-green-teacher" ng-click="accessActivities()">Acessar<br>agora</button>
</div>
</div><!-- end ngIf: role_user != 'STUDENT' && role_user != 'PARENT' && (content.dados.plano_aula_id != null || content.dados.ops_plan_status == 1 || content.dados.ops_plan_status == 2) -->
<p></p>
<div class="clearfix" ng-hide="content.dados.is_loading">
<span ng-show="content.message != ''" ng-bind-html="content.message" class="ng-binding"></span>
<!-- INDICATIONS -->
<span class="btn-options">
<!-- ngIf: role_user != 'STUDENT' && !content.dados.indicacao --><div ng-if="role_user != 'STUDENT' && !content.dados.indicacao" class="text-center ng-scope">
<button class="btn btn-default btn-actions ng-binding" ng-click="assignTasks()"><i class="tasks-icon active" ng-class="{'active':content.dados.show_assign_task,'not-active':!content.dados.show_assign_task}" style=""></i> Fechar a tarefa</button>
</div><!-- end ngIf: role_user != 'STUDENT' && !content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' && content.dados.indicacao -->
<!-- ngIf: role_user != 'STUDENT' --><div ng-if="role_user != 'STUDENT'" class="text-center ng-scope">
<button class="btn btn-default btn-actions ng-binding" ng-click="configContent();"><i class="hide-content"></i>Conteúdo escondido</button>
</div><!-- end ngIf: role_user != 'STUDENT' -->
<div class="text-center">
<button class="btn btn-default btn-actions ng-binding" ng-click="setFavorite(content.is_favorited)"><i class="fav-icon not-active" ng-class="{'not-active': (content.is_favorited == false),'active': (content.is_favorited == true)}" aria-hidden="true"></i>Adicionar aos meus interesses</button>
</div>
</span>
</div>
<!-- ngIf: role_user == 'STUDENT' -->
</div>
<div class="clearfix"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div></div></div>
</div>