javascript - 如何根据屏幕尺寸更改 Angular JS 中的弹出框位置？

Question

这是我在 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-class 标签旁边使用 popover-placement="right" 标签时，它可以工作，但如何根据我的屏幕分辨率来控制它？

Answer 1

对弹出框放置使用 Angular 表达式:

<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