在 angularjs 中显示输入验证弹出框

Question

我想在 angularjs 中进行输入验证。通过在无效时在其上显示 bootstrap 弹出窗口（https://angular-ui.github.io/bootstrap/#/popover）。我不知道如何触发弹出窗口。

 User name:
   <input type="text" name="userName" ng-model="user.name" popover="m here"  popover-trigger="myForm.userName.$error.required" required>

[笨蛋]：http://plnkr.co/edit/PwgquZXzhacvyeKeBc2O?p=preview

Answer 1

要使用自定义条件触发弹出窗口，您必须使用 $tooltipProvider

默认情况下，您只能为 mouseenter、mouseleave、click、focus、blur 触发弹出窗口

因此您必须定义自定义触发器，如下所示：http://plnkr.co/edit/0wEqzz?p=preview

 angular.module('myApp',['ui.bootstrap'])
  .config(['$tooltipProvider', function($tooltipProvider){
    $tooltipProvider.setTriggers({'customEvent': 'customEvent'});
 }]);

angular.module('myApp').controller('myController', ['$scope','$timeout',
  function($scope, $timeout) {
    $scope.fireCustomEvent = function() {
    $timeout(function() {
      $('#tooltipTarget').trigger('customEvent');
    }, 0);
}
}]);

在 angularjs 中显示输入验证弹出框

show popover on input validation in angularjs

validation

input

popover

angularjs