我在 AngularJS (1.2.10) 中,我有一个表单,它是一个 HTML 模板,它通过使用 bootstrapvalidator 验证某些表单字段的指令公开。表单字段附加了特殊的信息按钮,这些按钮使用弹出框来提供有关每个字段的进一步指导。
我遇到的问题是,当触发按钮位于指令的模板内时,弹出框不会触发,但如果按钮位于指令之外,它们可以正常工作,如下面的 Plunk 所示。
请检查此 Plunk 以获取所有代码:
http://plnkr.co/edit/i8ukXYVPJAJz6sM9q6MI?p=preview
主要指令:
(function(angular) {
'use strict';
angular.module('appointmentsApp', ['ui.bootstrap'])
.controller('appointmentsController', ['$scope', function($scope) {
var vm = this
$scope.form = 'frmPrimarySecondaryMedicalInsurance',
$scope.test = {
description: 'Test application'
};
}])
.directive('medicalInsuranceForm', function() {
return {
restrict: 'E',
scope: {},
templateUrl: 'medical-insurance-form.tpl.html',
link: function(scope, form){
form.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating : 'glyphicon glyphicon-refresh'
},
fields: {
txtMedicalInsuranceName: {
validators: {
notEmpty:{
message: 'Medical insurance name is required.'
}
}
},
txtPolicyHolderPrimaryInsurance: {
validators: {
notEmpty:{
message: 'The primary insurance policy holder name is required.'
}
}
}
}
});
}
};
});
})(window.angular);
模板中的一个元素:
<!-- BEGIN: Out of Pocket Payer? -->
<div id="frmCtrlOutOfPocketPayer">
<div class="row">
<div class="col-lg-6">
<label class="control-label" for="txtOutOfPocketPayer">Out of Pocket Payer?:</label>
</div>
</div>
<div class="row">
<div class="col-lg-3">
<div class="input-group input-group-sm checkbox-xs">
<span class="input-group-btn" id="btnHelp-OutOfPocketPayer">
<button type="button" class="btn btn-default btn-sm label label-default" aria-label="Help button" data-container="body"
popover-placement="top" popover-trigger="popover" popover-title="Out of Pocket Payer?"
popover="Please check this box if consumer states they will not be going through insurance.">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</button>
</span>
<input type="checkbox" class="form-control checkbox-inline checkbox-xs" name="txtOutOfPocketPayer" aria-describedby="btnHelp-OutOfPocketPayer" ng-model="vm.outOfPocketPayer" />
</div>
</div>
</div>
</div>
<!-- END: Out of Pocket Payer? -->
弹出指令:
angular.module('appointmentsApp', ['ui.bootstrap'])
.directive("popoverHtmlUnsafePopup", function () {
return {
restrict: "EA",
replace: true,
scope: { title: "@", content: "@", placement: "@", animation: "&", isOpen: "&" },
templateUrl: "popover-html-unsafe-popup.html"
};
});
弹出框模板:
<div class="popover {{placement}}" ng-class="{ in: isOpen(), fade: animation() }">
<div class="arrow"></div>
<div class="popover-inner">
<h3 class="popover-title" ng-bind="title" ng-show="title"></h3>
<div class="popover-content" bind-html-unsafe="content"></div>
</div>
</div>
最后是 index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Medical Insurance Component</title>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/js/jquery-1.9.0.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>
<script src="popover.js"></script>
<script src="medicalInsuranceForm.js"></script>
<link rel="stylesheet" type="text/css" href="appointments.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/css/bootstrapvalidator.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/css/custom-theme/jquery-ui-1.9.2.custom.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/FontAwesome.otf">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.eot">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.svg">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.ttf">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/font/fontawesome-webfont.woff">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css">
</head>
<body ng-app="appointmentsApp">
<div ng-controller="appointmentsController">
<div class="col col-sm-4"></div>
<button type="button" class="btn btn-default btn-sm label label-default" aria-label="Help button" data-container="body"
popover-placement="bottom" popover-toggle="popover" popover-title="Medical Insurance Name"
popover="Insurance company name such as Aetna, Blue Cross, etc.">
<span class="glyphicon glyphicon-question-sign" aria-hidden="true"></span>
</button>
<br/>
<div class="row"></div>
<medical-insurance-form></medical-insurance-form>
</div>
</body>
</html>