javascript - 如何仅以一种分辨率隐藏显示模式?
问题描述
有两个组件。第一个有一个ng-click
并使用第二个组件调用模态,一切正常。问题是模态应该只在768分辨率下打开......
已经尝试媒体查询但没有成功..
谢谢!
这是代码:
父.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>
解决方案
内部this.openModal()
方法检查 if( $(window).width() > 767 ) { open modal.....}
推荐阅读
- flutter - 重命名文件后 Flutter 应用程序崩溃(下载后)
- graphql - graphql - 没有PK的多对多关系
- r - 按类别绘制 R 中的大型面板数据
- r - 如果同一时期有质量好的数据,则删除质量差的列
- python - 画布背景图像不适合整个窗口 tkinter python
- reactjs - 将 CRA (Create React App) 创建的 React App 部署到具有不同 URL PATHS 的不同 ENVIRONMENTS?
- angular - Angular 的 FormControl 导致无限循环
- python - 没有numpy的列表切片
- nginx - 如何在生产环境中启动 laravel-echo 服务器?
- browser - 在 Google Chrome 上 - 搜索字符串即使存在也不显示组合