如何在angular bootstrap popover中显示角度形式验证错误？

Question

我是棱角分明的新手.我想在元素的右侧显示角度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);

我只是想显示错误消息

1. 当用户单击保存按钮时(所有表单字段错误消息)
2. 元素的模糊(仅用于失去焦点的元素)

这是我的plnkr,我试图得到消息.

更新

不知何故,我显示了角度引导弹出和关闭按钮,关闭弹出窗口.

我当前的plunker有两个问题.

1. 我想在弹出模板中显示错误消息,该错误消息分别对应于打开它的元素.我需要这个模板,因为我需要一个关闭按钮.
2. 一旦我关闭了弹出窗口,如果该字段为空并且用户单击提交,则弹出窗口不会在下次打开.我想在每次提交时显示错误消息.

Answer 1

像这样放置你的模板怎么样：

<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">&times;</span></button>
    </div>
    <div class="popover-content">
        somecontent
    </div>
  </div>
</script>

在这里工作的笨蛋。

更新：

您可以使用 angularjs foreach 循环遍历表单中的所有错误，然后从那里您可以显示元素上的弹出窗口。像这样的东西：工作笨蛋

<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="$(&quot;#' + field.$name + '&quot;).popover(&quot;hide&quot;);">&times;</button>',
              content: message,
              html: true
            });

            return $('#' + field.$name).popover("show")
        });
    };
  });
</script>