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类名。我试图解决这个问题，但我失败了，这段代码不起作用。

当我在popover-placement="right"标记旁边使用popover-class标记时，它可以正常工作，但如何根据我的屏幕分辨率来控制它呢？

Answer 1

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

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

如何根据屏幕大小更改角度js中的弹出窗口位置？

1 个答案: