如何根据屏幕大小更改角度js中的弹窗布局？

这是我在AngularJs应用程序中的代码。如何根据屏幕大小更改角度js中的弹窗布局？

<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10 myMoodTitle"> 
    <span class="headText">My Mood</span> 
    <a id="openMyMoodMsgBox" class="fa fa-question-circle  tooltipInfo" uib-popover-template="'chatMySettingsMoodPopover.html'" popover-class="chat-mysettings-mymood" ng-click="open('1')" popover-is-open="isOpen1"></a> 
</div>

上面的代码，我不使用popover-placement标签。我想改变这个时屏幕分辨率将小于768px它会显示popover-placement是底部。我想这种方式之下，但它不工作：

var $iW = $(window).innerWidth(); 
if ($iW < 768){ 
    $('.chat-mysettings-mymood').popover({placement: 'bottom'}); 
} 
else{ 
    $('.chat-mysettings-mymood').popover({placement: 'right'}); 
};

这里，chat-mysettings-mymood是酥料饼的类名。我试图解决这个问题，但我失败了，这段代码不起作用。

当我在标签旁边使用popover-class标签时，它可以工作，但是如何根据我的屏幕分辨率来控制它？

来源

2016-10-22 Sukanta Bala

使用的角度表达了酥料饼，放置：

<a id="openMyMoodMsgBox" 
     class="fa fa-question-circle tooltipInfo" 
     uib-popover-template="'chatMySettingsMoodPopover.html'" 
     popover-placement="{{ placement }}" 
     popover-class="chat-mysettings-mymood" 
     ng-click="open('1')" 
     popover-is-open="isOpen1"></a>

JS文件：

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']); 
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $timeout) { 
    $scope.isOpen1 = true; 

    updatePlacement(); 

    $(window).on('resize', updatePlacement); 

    function updatePlacement() { 
    $timeout(function() { 
     console.log('W = ' + $(window).innerWidth()); 
     $scope.placement = $(window).innerWidth() < 768 ? 'bottom' : 'right'; 
    }); 
    } 
});

plunker：https://plnkr.co/edit/Iy9y71YUWcYD1vvykQH9?p=preview

来源

2016-10-22 15:16:57 Andriy

我了解，酥料饼的位置将是动态的......但如何我可以在我的代码中申请吗？请用一个简单的例子来解释...但是，谢谢你的回复。 –

我为您提供了一个功能完整的示例，请参阅我的plunker - > example.js文件，在控制器中计算放置值，一旦您的应用程序被加载，然后在每个窗口调整大小（尝试调整预览窗口在plunker见变化）。还打开控制台窗口，我打印当前Windows宽度与console.log（）函数那里为了方便 – Andriy

我更新了我的答案与JS代码，顺便说一句，它基于官方bootstrap-ui演示 - https：// angular-ui。 github.io/bootstrap/#/popover（他们的闯入者：https：//plnkr.co/edit/?p=preview） – Andriy

如何根据屏幕大小更改角度js中的弹窗布局？

回答

相关问题