Как скрыть-показать модал только в одном разрешении?

Question

Есть два компонента.Первые имеют ng-click и вызывают модал со вторым компонентом, все работает нормальноПроблема в том, что модал должен открываться только в разрешении 768 ...

Уже попробуйте с медиа-запросами, но безуспешно.

Спасибо!

вот код:

parent.html :

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" ng-click="$ctrl.openModal()">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9 benefit-parenthood">
        <div class="description">
            <p class='title'>lorem impsun title</p>
            <p class="area">
                <i class="fa fa-cookie-bite cookie-icon" aria-hidden="true"></i>
                <span class="area-item">lorem impsum</span>
            </p>
            <p class="area-mobile">lalala</p>
        </div>
    </div>
    <div class="hidden-xs col-sm-3 col-md-3 col-lg-3 container-image">
        <div class="partner-brand">
            <img src="app/assets/greyimg.png" class="partner-avatar">
        </div>
    </div>
</div>

parent.component.js :

(function () {
  'use strict';
  angular
    .module('parenthoodBenefit')
    .component('parenthoodBenefitComponent', {
      bindings: {},
      templateUrl: 'app/parenthood-benefit/parenthood.html',
      controller: parenthoodBenefitCtrl
    })    

  function parenthoodBenefitCtrl($scope, $uibModal) {
    this.openModal = function () {

      $uibModal.open({
        templateUrl: 'app/modal-benefit/modal.html',
        size: 'lg',
        controller: function ($scope, $uibModalInstance) {

          $scope.ok = function () {
            $uibModalInstance.close();
          };

          $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');
          };
        }
      }).result.then(function () { }, function (res) { })
    };
  }
}());

модальный.html :

<i class="fa fa-times icon-close" aria-hidden="true"  ng-click="ok()" ></i>
<access-detail-component></access-detail-component>

Answer 1

1. Получите ширину окна, как вы сделали, и просто отключите щелчок в контроллере $ scope.width = $ window.innerWidth <= 768?false: true; </p>

2. В html добавьте ng-disabled = "width" к соответствующему div

Это может лучше подойти

Answer 2

1. Обновленный ответ - добавьте ниже функцию в вашем контроллере - Это будет получать обновленную ширину, если ширина изменяется

    angular.element($window).bind('resize', function(){

     if($window.innerWidth <= 768){

      $scope.width =false;

       }else{ 

       //to disable click of open modal
       $scope.width =true;

       //then close your modal forcefully
       $uibModalInstance.close();

       //Run digest
       $scope.$digest();
    }); 

2. В html добавьте ng-disabled = "width" к соответствующему div

Answer 3

Внутри this.openModal() метод проверки if( $(window).width() > 767 ) { open modal.....}