如何在angular js中根据屏幕大小改变弹出窗口的位置?

How can I change popover placement in angular js depending screen size?

本文关键字：改变 窗口 位置 屏幕 angular js      更新时间：2023-09-26

这是我在AngularJs应用程序中的代码。

<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-placement="right"标签旁边的popover-class标签，它的工作，但我怎么能控制它取决于我的屏幕分辨率?

使用angular expression for popover-placement:

<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';
    });
  }
});

砰砰作响:https://plnkr.co/edit/Iy9y71YUWcYD1vvykQH9?p=preview

相关文章：