通过 javascript 显示和隐藏引导工具提示
show and hide bootsrap tooltip through javascript
我有一个使用 ui.bootsrap 工具提示功能的东西,代码工作正常,但我不知道通过脚本显示和隐藏工具提示,说我有一个表单,其中一些字段验证,当我提交表单时,如果组件的验证说(电子邮件的文本字段)失败,那么它应该显示一个工具提示,除非该字段被正确验证,否则它不应该出现,
谁能告诉我一些解决方案
脚本
var app = angular.module('someApp', ['ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.validate = function () {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var emailValid = re.test($scope.userEmail);
if(!emailValid)
{
// I want to show the tool tip
}
};
})
html
<div ng-app="someApp" ng-controller="MainCtrl">
<form ng-submit="validate()">
<input type="text" ng-model='userEmail' rc-tooltip="Invalid Email...." tooltip-placement="bottom" />
<input type="submit" />
</form>
</div>
并且通过使用 javascript 的数据切换选项,您可以使用工具提示。
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
通过上面的代码你可以分配工具提示然后显示和隐藏你可以使用
$('#element').tooltip('show')
或
$('#element').tooltip('hide')
这是一个简单的电子邮件验证指令,它使用 bootstrap:
app.directive('email', function() {
return {
restrict: 'A',
require: 'ngModel',
compile: function(element, attr) {
element.tooltip({ placement: 'right', title:'Email is invalid', trigger:'manual'});
function emailValid(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var valid = re.test(email);
return valid;
}
return function(scope, element,attr, ngModel) {
ngModel.$validators.email = function(val) {
return emailValid(val);
}
scope.$watch(function() {
return ngModel.$error.email;
}, function(val) {
if (val)
element.tooltip('show');
else
element.tooltip('hide');
});
}
}
}
});
用法
<input type="text" ng-model="email" email />
我有一个使用 ui.bootsrap 工具提示功能的东西,代码工作正常,但我不知道通过脚本显示和隐藏工具提示,说我有一个表单,其中一些字段验证,当我提交表单时,如果组件的验证说(电子邮件的文本字段)失败,那么它应该显示一个工具提示,除非该字段被正确验证,否则它不应该出现,
谁能告诉我一些解决方案
脚本
var app = angular.module('someApp', ['ui.bootstrap']);
app.controller('MainCtrl', function ($scope) {
$scope.validate = function () {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var emailValid = re.test($scope.userEmail);
if(!emailValid)
{
// I want to show the tool tip
}
};
})
html
<div ng-app="someApp" ng-controller="MainCtrl">
<form ng-submit="validate()">
<input type="text" ng-model='userEmail' rc-tooltip="Invalid Email...." tooltip-placement="bottom" />
<input type="submit" />
</form>
</div>
并且通过使用 javascript 的数据切换选项,您可以使用工具提示。
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
通过上面的代码你可以分配工具提示然后显示和隐藏你可以使用
$('#element').tooltip('show')
或
$('#element').tooltip('hide')
这是一个简单的电子邮件验证指令,它使用 bootstrap:
app.directive('email', function() {
return {
restrict: 'A',
require: 'ngModel',
compile: function(element, attr) {
element.tooltip({ placement: 'right', title:'Email is invalid', trigger:'manual'});
function emailValid(email) {
var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var valid = re.test(email);
return valid;
}
return function(scope, element,attr, ngModel) {
ngModel.$validators.email = function(val) {
return emailValid(val);
}
scope.$watch(function() {
return ngModel.$error.email;
}, function(val) {
if (val)
element.tooltip('show');
else
element.tooltip('hide');
});
}
}
}
});
用法
<input type="text" ng-model="email" email />