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 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-Bootstrap-native AngularJS directives based on Bootstrap's markup and 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>

我有一个弹出窗口的以下代码，但是当我调整页面大小时，我想关闭弹出窗口

1 个答案: