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) { })
    };
  }
}());

modal.html ：

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

Answer 1

在this.openModal()方法内检查if( $(window).width() > 767 ) { open modal.....}

Answer 2

1。像以前一样获得窗口的宽度，只需禁用单击即可在控制器中 $ scope.width = $ window.innerWidth <= 768？假：真；

2。在html中，将ng-disabled =“ width”添加到相应的div

这可能是更好的方法

Answer 3

1。更新答案-在控制器中添加以下功能 -如果宽度更改

，它将获得更新的宽度

@Autowired
RoleRepository roleRepository;

2。在html中，将ng-disabled =“ width”添加到相应的div

如何仅以一种分辨率隐藏显示模态？

3 个答案: