个人中心
gpt4 book ai didi

javascript - 从 Controller 显示或隐藏父元素的弹出窗口 - angularjs

转载 作者：数据小太阳 更新时间：2023-10-29 05:28:37 24 4
gpt4 key购买 nike

我有以下 div，里面是一个输入文本。 div 有一个弹出窗口，我希望在输入文本处于焦点时显示它。如果输入文本失焦，我希望隐藏弹出框。我目前正在尝试使用以下代码来做到这一点:

HTML:

<div id="divParent" bs-popover
    data-trigger="focus click" 
    data-auto-close="1"
    data-placement="bottom"
    class="pswd-popover"
    data-template-url="people/user/user-profile/templates/password-requirements.html">
    <rp-form-input-text
        rp-model="page.userData.password"
        config="page.formConfig.password">
    </rp-form-input-text>
</div>

型号:

model.password = inputTextConfig({
    id: "password",
    fieldName: "password",
    dataType: "password",
    required: false,
    maxLength: 24,
    modelOptions: {
        allowInvalid: true,
    },
    onFocus: model.getMethod("showPopover")
});

Controller :

vm.showPopover = function () {
    var focus = true;

    $(window).keyup(function (e) {
        var code = (e.keyCode ? e.keyCode : e.which);
        if (code == 9 && focus) {
            $timeout(function() {
                angular.element('#divParent').trigger('click');
            }, 100);
            focus = false;
        }
    });

};

我遇到的问题是我只想通过选项卡触发 onfocus 功能。因为点击div会自动触发popover的显示。这就是为什么我有 keyup 函数来检测 div 是否被单击或通过 TAB 访问。另一个问题是我只通过触发 div 的 onclick 来显示和隐藏弹出窗口。如何从 Controller 显示和隐藏父 div 的弹出窗口？

最佳答案

我从字面上实现了这个 - 仅在选项卡上触发(而不是在单击该字段时触发)，但我怀疑你会想要包括这两者，所以你会在下面找到该场景的代码。

您可以使用 $popover服务可以更精确地控制它的触发。

var app = angular.module('app', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);

app.controller('MainCtrl', function($scope, $popover) {

  // sometimes we don't want to trigger code to show the Popover
  $scope.suspendPopoverAction = false;

  $scope.popover = {
    title: 'HEY',
    content: 'This was triggered by tabbing.'
  };

  var asAServiceOptions = {
    title: $scope.popover.title,
    content: $scope.popover.content,
    trigger: 'manual',
    placement: 'bottom',
    autoClose: true,
    onBeforeShow: function() {
      $scope.activeElement = document.activeElement; // record element with focus
      $scope.suspendPopoverAction = true; // don't trigger blur code
    },
    onShow: function() {
      if ($scope.activeElement) $scope.activeElement.focus(); // restore focus
      $scope.suspendPopoverAction = false; // popup is showing, and focus is back to input, so now safe for blur code
    }
  };

  var myPopover = $popover(angular.element(document.querySelector('#divParent')), asAServiceOptions);

  $scope.inputHasFocus = function() {
    if (!$scope.suspendPopoverAction) {
      myPopover.$promise.then(myPopover.show);
    } else {
      $scope.suspendPopoverAction = false;
    }
  };

  $scope.inputLostFocus = function() {
    if (!$scope.suspendPopoverAction) {
      myPopover.$promise.then(myPopover.hide);
    }
  };

  $scope.inputClicked = function(event) {
    $scope.suspendPopoverAction = true; // prevent popover from showing on click

    // NB: If you want to allow mouse clicks also:
    // 1) use ng-click instead of ng-mousedown in the <input>
    // 2) remove "$scope.suspendPopoverAction = true;" line and replace with:
    //      event.stopPropagation();
    // Doing the above prevents the click triggering the "autoClose: true" option, resulting in flickering of the Popover
  };
});
body {
  padding: 5px !important;
}

.pswd-popover {
  background-color: orange;
  padding: 10px;
  margin: 10px;
}

.myheading {
  margin-bottom: 15px;
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
  <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
  <script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular.min.js" data-semver="1.5.5"></script>
  <script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular-animate.min.js" data-semver="1.5.5"></script>
  <script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular-sanitize.min.js" data-semver="1.5.5"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.8"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.8"></script>
  <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.8"></script>
</head>

<body ng-controller="MainCtrl">

  <h4 class = "myheading">Trigger Popover on Tabbing in Password field only</h4>
  An input for testing Tab:
  <input type="text">

  <div id="divParent" class="pswd-popover">
    Password:
    <input type="text" ng-focus="inputHasFocus()" ng-blur="inputLostFocus()" ng-mousedown="inputClicked($event)">
    <button>Some Button</button>
  </div>

  Another input for testing Tab:
  <input type="text">

</body>

</html>

要在 tab 键或单击密码字段时显示弹出框:

var app = angular.module('app', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap']);

app.controller('MainCtrl', function($scope, $popover) {

  // sometimes we don't want to trigger code to show the Popover
  $scope.suspendPopoverAction = false;

  $scope.popover = {
    title: 'HEY',
    content: 'Triggered by tabbing OR clicking.'
  };

  var asAServiceOptions = {
    title: $scope.popover.title,
    content: $scope.popover.content,
    trigger: 'manual',
    placement: 'bottom',
    autoClose: true,
    onBeforeShow: function() {
      $scope.activeElement = document.activeElement; // record element with focus
      $scope.suspendPopoverAction = true; // don't trigger blur code
    },
    onShow: function() {
      if ($scope.activeElement) $scope.activeElement.focus(); // restore focus
      $scope.suspendPopoverAction = false; // popup is showing, and focus is back to input, so now safe for blur code
    }
  };

  var myPopover = $popover(angular.element(document.querySelector('#divParent')), asAServiceOptions);

  $scope.inputHasFocus = function() {
    if (!$scope.suspendPopoverAction) {
      myPopover.$promise.then(myPopover.show);
    } else {
      $scope.suspendPopoverAction = false;
    }
  };

  $scope.inputLostFocus = function() {
    if (!$scope.suspendPopoverAction) {
      myPopover.$promise.then(myPopover.hide);
    }
  };

  $scope.inputClicked = function(event) {
    // using the below code prevents the click triggering the "autoClose: true" option resulting in flickering
    event.stopPropagation();
  };
});
body {
  padding: 5px !important;
}

.pswd-popover {
  background-color: orange;
  padding: 10px;
  margin: 10px;
}

.myheading {
  margin-bottom: 15px;
}
<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="//cdn.jsdelivr.net/fontawesome/4.5.0/css/font-awesome.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/libs.min.css">
  <link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/docs.min.css">
  <script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular.min.js" data-semver="1.5.5"></script>
  <script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular-animate.min.js" data-semver="1.5.5"></script>
  <script src="//cdn.jsdelivr.net/angularjs/1.5.5/angular-sanitize.min.js" data-semver="1.5.5"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.js" data-semver="v2.3.8"></script>
  <script src="//mgcrea.github.io/angular-strap/dist/angular-strap.tpl.js" data-semver="v2.3.8"></script>
  <script src="//mgcrea.github.io/angular-strap/docs/angular-strap.docs.tpl.js" data-semver="v2.3.8"></script>
</head>

<body ng-controller="MainCtrl">

  <h4 class = "myheading">Trigger Popover on Tabbing or Clicking in Password field</h4>
  An input for testing Tab:
  <input type="text">

  <div id="divParent" class="pswd-popover">
    Password:
    <input type="text" ng-focus="inputHasFocus()" ng-blur="inputLostFocus()" ng-click="inputClicked($event)">
    <button>Some Button</button>
  </div>

  Another input for testing Tab:
  <input type="text">

</body>

</html>

另请注意 HTML 中的细微变化。此版本使用 <input ng-click="" ，而仅制表符代码使用了 <input ng-mousedown="" .此更改可防止与 auto-close: true 相关的闪烁.

关于javascript - 从 Controller 显示或隐藏父元素的弹出窗口 - angularjs，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45158807/

24 4 0
文章推荐： javascript - 使用 threejs 选择、更新和操作 Obj 文件
文章推荐： javascript - 在 vue.js 模板中包含外部脚本
文章推荐： ios - 如何在 instagram 中分享图片？Swift
文章推荐： ios - Swift 4 - 将 UITapGestureRecognizer 添加到 subview 图像 - 未调用该方法
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com