Как изменить расположение размещения в угловом 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, он работает, но как я могу контролировать его в зависимости от разрешения экрана?

Answer 1

использования угловое выражение для поповера-размещений:

<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