我是棱角分明的新手。我想在元素的右侧显示角度bootstrap popover中的表单错误。我试图创建指令，并在更改类时得到一个元素。但我不知道如何下一步。
(function(angular) {
'use strict';
var app=angular.module('formExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.master = {};
$scope.update = function(user) {
$scope.master = angular.copy(user);
};
$scope.reset = function(form) {
if (form) {
form.$setPristine();
form.$setUntouched();
}
$scope.user = angular.copy($scope.master);
};
$scope.reset();
}]);
app.directive("alert", function(){
return {
restrict: 'C',
priority: -1000,
link: function(scope, ele, attrs, ctrl){
scope.$watch(function() {console.log(ele.attr('class')); })
if (ctrl) {
console.log("applying custom behaviour to input: ", ele.attr('id'));
// ... awesomeness here
}
}
};
});
})(window.angular);
我只想显示错误消息
答案 0 :(得分：2)
如此放置模板：
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="gmePopover">
<div class="popover-header">
<button type="button" class="close" popover-toggle><span aria-hidden="true">×</span></button>
</div>
<div class="popover-content">
somecontent
</div>
</div>
</script>
使用Plunker here。
<强>更新
您可以使用angularjs foreach循环遍历表单中的所有错误，然后从那里可以显示元素的弹出窗口。这样的事情：working plunker
<script type="text/javascript">
var app=angular.module('testApp', ['ngAnimate', 'ngSanitize'], function($httpProvider) {});
app.controller("PopoverDemoCtrl", function($scope, $http, $window) {
$scope.validate = function() {
var _popover;
var error = $scope.testForm.$error;
angular.forEach(error.required, function(field){
var message = 'This field (' + field.$name + ') is required';
_popover = $('#' + field.$name).popover({
trigger: 'manual',
title: '<span class="text-info"><strong>title</strong></span>'+
'<button type="button" id="close" class="close" onclick="$("#' + field.$name + '").popover("hide");">×</button>',
content: message,
html: true
});
return $('#' + field.$name).popover("show")
});
};
});
</script>
答案 1 :(得分：2)
您可以创建一个截取$setSubmitted的{{1}}方法的指令。
您可以找到有关方法here
的更多信息请找到工作示例here
当此指令拦截FormController方法时，我们可以通知另一个指令，以便在bootstrap popover中显示验证错误。
我在以下假设下工作（随意纠正我）：
$setSubmitted 该解决方案适用于两个指令：
ng-submit="nameOfForm.$valid && vm.onSubmit()"和submitNotify
popoverValidation在提交表单时通知submitNotify，popoverValidation指令会显示表单错误（如果有）。
popoverValidation submitNotifydirective('submitNotify', function () {
return {
restrict: 'A',
require: 'form',
controller: function SubmitNotify() { },
link: function (scope, element, attrs, form) {
var $setSubmitted = form.$setSubmitted;
form.$setSubmitted = function () {
$setSubmitted.bind(form)();
scope.$broadcast('onSubmitNotify');
};
}
};
})
代码或form link函数用回调函数替换ngForm函数。回调函数通知$setSubmitted指令表单已提交。
popoverValidation popoverValidationdirective('popoverValidation', [function () {
return {
restrict: 'A',
require: ['ngModel', '^submitNotify'],
link: function (scope, element, attrs, require) {
scope.$on('onSubmitNotify', function () {
var ngModel = require[0];
if (!ngModel.$valid) {
showPopover(ngModel.$error);
}
});
function showPopover( $error) {
var options = {
content: getValidationErrorsHtml($error),
html: true,
template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content popover-content-errors"></div></div>',
title: '<span class="text-info"><strong>Error</strong></span><button type="button" data-dismiss="popover" class="close">×</button>',
trigger: 'manual'
}
$(element).popover(options);
$(element).on('shown.bs.popover', hidePopover);
$(element).popover('show');
}
function hidePopover() {
$(this).next('.popover').find('button[data-dismiss="popover"]').click(function (e) {
$(element).popover('hide');
});
}
function getValidationErrorsHtml($error) {
var errors = [];
if ($error.required) {
errors.push(requiredErrorMessage());
}
if ($error.email) {
errors.push(invalidEmailAddress());
}
var errorHtml = '<ul class="list-group">';
for (var i = 0; i < errors.length; i++) {
errorHtml += '<li class="list-group-item">' + errors[i] + '</li>';
}
errorHtml += '</ul>';
return errorHtml;
}
function requiredErrorMessage() {
return 'This field is required';
}
function invalidEmailAddress() {
return 'Please enter a valid email address';
}
}
};
}]);
submitNotify标记
form指令会通知表单已提交popoverValidation绑定属性是否有效完整HTML：
ng-model<form name="myForm" ng-controller="MyFormController as vm" ng-submit="myForm.$valid && vm.onSubmit()" submit-notify="" novalidate>
<div class="panel panel-primary">
<div class="panel-heading">Form Validation with Popovers</div>
<div class="panel-body">
<div class="form-group">
<label>First name</label>
<input type="text" name="firstName" class="form-control" required ng-model="person.firstName" popover-validation="" />
</div>
<div class="form-group">
<label>Surname</label>
<input type="text" name="surname" class="form-control" required ng-model="person.surname" popover-validation="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="person.email" popover-validation="" />
</div>
</div>
<div class="panel-footer">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
<style type="text/css">
.popover-content-errors {
padding:0px;
}
.popover-content-errors .list-group {
margin-bottom:0px
}
.popover-content-errors .list-group-item {
border-left:none;
white-space:nowrap;
}
.popover-content-errors .list-group-item:first-child {
border-top:none;
}
.popover-content-errors .list-group-item:last-child {
border-bottom:none;
}
</style>