У меня есть следующий код для всплывающего окна, однако, когда я изменяю размер страницы, я хочу закрыть всплывающее окно

Question

Мой HTML

<div id="deviceInputContainer">
                <div class="row noMarg">

                    <div class="form col-xs-12" style='padding-left:0px;margin-right:15px;'>


                        <div class="form col-xs-12 noPad left">
                        <h2 class="page-title">Certification Projects
                            <span class='icon-settings-big'  style='cursor:pointer;float:right;margin-top:-10px;' title='settings' uib-popover-template="dynamicPopoverPageSettings.templateUrl" 
                            popover-placement="bottom-right" popover-trigger="click outsideClick"  popover-class="settingsClass" ></span>
                        </h2> 
                    </div>

                         <div class="helpMessage" style="margin-left:-15px;margin-right:-15px;" ng-show="dashboardData.userPreferences.showHelpTextEnabled">

                            <p class="help-text-content col-sm-12 helpText-color helpText-size" style='margin-bottom:15px;'>Your open projects are listed below- but you can search for other projects if you want. Just
                            set the search criteria below.</p>
                        </div>
                    </div>
                </div>
            </div>

Мой код контроллера для переключения popover и изменения размера окна при закрытии popover. Но popover hide не работает при изменении размера окна, может кто-нибудь, пожалуйста, помогите мне, где я делаю неправильно

$scope.dynamicPopoverPageSettings = {
      templateUrl: 'myPopoverTemplatePageSetting.html',
      title: 'Page Settings',
      isPopOpen: false,
      setIsPopOpen: function() {
        $scope.dynamicPopoverPageSettings.isPopOpen = !$scope.dynamicPopoverPageSettings.isPopOpen;
        console.log("$scope.dynamicPopoverPageSettings.isPopOpen == " + $scope.dynamicPopoverPageSettings.isPopOpen);
      },
      setIsPopFalse: function() {
        $scope.dynamicPopoverPageSettings.isPopOpen = false;
        console.log("$scope.dynamicPopoverPageSettings.isPopOpen == " + $scope.dynamicPopoverPageSettings.isPopOpen);
      }
    };

var w = angular.element($window);

   w.bind('resize', function () {


$('.settingsClass ').popover('hide');


   });

Answer 1

При использовании angular, если он не используется, id рекомендуется использовать Angular-Bootstrap-нативные директивы AngularJS, основанные на разметке Bootstrap и CSS . Я включил эту ссылку на их сайт, это документы 0.14.3 . Также включаю этот Codepen с примером того, что, я думаю, вы пытаетесь достичь. Надеюсь, это поможет, я всегда могу помочь и изменить его дальше.

function exampleController($scope, $window) {
  $scope.popoverVisible = false;

  function onResize() {
    $scope.popoverVisible = false;

    // manuall $digest required as resize event
    // is outside of angular
    $scope.$digest();
  }

  function cleanUp() {
    angular.element($window).off("resize", onResize);
  }

  angular.element($window).on("resize", onResize);
  $scope.$on("$destroy", cleanUp);
}

angular
  .module("example", ["ui.bootstrap"])
  .controller("exampleController", exampleController);

html,
.container,
.container-fluid {
  width: 100%;
  height: 100%;
  background-color: #333;
  color: #fff;
  text-align: center;
  button {
    margin-top: 10%;
    font-weight: bold;
  }
  button:focus {
    outline: 0;
  }
  .popover {
    .popover-title,
    .popover-content {
      color: #333;
    }
  }
}

<div class="container-fluid" ng-app="example">
  <div class="container" ng-controller="exampleController">
    <button uib-popover="I have a title!" popover-title="The title." popover-placement="bottom-right" popover-is-open="popoverVisible" type="button" class="btn btn-primary">
              CLICK ME
    </button>
  </div>
</div>