我有以下 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/
我得到了一个包含嵌套链接的表单。编辑时链接字段为空的问题。这是我的表格:Editingkategori{:action=>'update',:id=>@konkurrancer.id})do|f|%>'Trackingurl',:style=>'width:500;'%>'Editkonkurrence'%>|我的konkurrencer模型:has_one:link我的链接模型:classLink我的konkurrancer编辑操作:defedit@konkurrancer=Konkurrancer.find(params[:id])@konkurrancer.link_attrib
我主要使用Ruby来执行此操作，但到目前为止我的攻击计划如下:使用gemsrdf、rdf-rdfa和rdf-microdata或mida来解析给定任何URI的数据。我认为最好映射到像schema.org这样的统一模式，例如使用这个yaml文件，它试图描述数据词汇表和opengraph到schema.org之间的转换:#SchemaXtoschema.orgconversion#data-vocabularyDV:name:namestreet-address:streetAddressregion:addressRegionlocality:addressLocalityphoto:i
我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby数组，我们在StackOverflow上找到一
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？ 最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
我知道您通常应该在Rails中使用新建/创建和编辑/更新之间的链接，但我有一个情况需要其他东西。无论如何我可以实现同样的连接吗？我有一个模型表单，我希望它发布数据(类似于新View如何发布到创建操作)。这是我的表格prohibitedthisjobfrombeingsaved: 最佳答案 使用:url选项。=form_for@job,:url=>company_path,:html=>{:method=>:post/:put} 关于ruby-on-rails-rails:Howtomak
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我试图在索引页中创建一个超链接，但它没有显示，也没有给出任何错误。这是我的index.html.erb代码。ListingarticlesTitleTextssss我检查了我的路线，我认为它们也没有问题。PrefixVerbURIPatternController#Actionwelcome_indexGET/welcome/index(.:format)welcome#indexarticlesGET/articles(.:format)articles#indexPOST/articles(.:format)articles#createnew_articleGET/article
我是rails的新手，想在form字段上应用验证。myviewsnew.html.erb.....模拟.rbclassSimulation{:in=>1..25,:message=>'Therowmustbebetween1and25'}end模拟Controller.rbclassSimulationsController我想检查模型类中row字段的整数范围，如果不在范围内则返回错误信息。我可以检查上面代码的范围，但无法返回错误消息提前致谢 最佳答案 关键是您使用的是模型表单，一种显示ActiveRecord模型实例属性的表单。c
我有一个rubyonrails应用程序。我按照facebook的说明添加了一个像素。但是，要跟踪转化，Facebook要求您将页面置于达到预期结果时出现的转化中。即，如果我想显示客户已注册，我会将您注册后转到的页面作为成功对象进行跟踪。我的问题是，当客户注册时，在我的应用程序中没有登陆页面。该应用程序将用户带回主页。它在主页上显示了一条消息，所以我想看看是否有一种方法可以跟踪来自Controller操作而不是实际页面的转化。我需要计数的Action没有页面，它们是ControllerAction。是否有任何人都知道的关于如何执行此操作的gem、文档或最佳实践？这是进入布局文件的像素