我是新的角度js。我想在元素右侧的角度引导弹出窗口中显示窗体错误。我尝试创建指令，当它更改类时，我有一个元素。但我没有想法如何下一步。
(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);
>当用户点击保存按钮(所有表单域错误消息)
>元素的模糊(仅针对失去焦点的元素)
这是我的plnkr，我试图得到的消息。
更新
不知怎的，我展示了角度引导弹出窗口和关闭按钮，关闭popover。
目前plunker有两个问题。
>我想在我的popover模板中显示错误信息
相应于它被打开的元素。我需要这个
因为我需要一个关闭按钮。
>一旦我关闭了popover，如果该字段是空的，用户点击
提交popover下次不打开。我想显示错误
每次提交消息。
如何将您的模板如下所示：
原文链接：https://www.f2er.com/angularjs/144120.html<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>
工作空档here。
更新：
您可以使用anglejs foreach循环遍历表单中的所有错误，然后从中可以显示您的元素上的popover基础。这样的事情：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>
