我有一个形式,有线到角,使用它进行验证。我能够使用ng-show指令显示错误消息,如:
<span ng-show="t3.f.needsAttention(f.fieldName)" ng-cloak> <span ng-show="f.fieldName.$error.required && !f.fieldName.$viewValue"> This field is required. </span> </span>
..其中f是形式,t3来自表单上的自定义指令,它检测是否尝试提交,并且包含用于检查字段有效性的函数。
我想要完成的是在popover中显示验证消息。无论是bootstrap的native popover,还是popover从UI Bootstrap,我都加载了。我也可以考虑AngularStrap如果它更容易做到使用该lib。
我现在正在努力的是一般的popovers的性质 – 他们基于用户事件,如点击,mouseenter,模糊等自动显示。我想做的是显示&基于上面ng-show属性中的相同功能隐藏popover。所以当表达式返回false隐藏它,并且当它返回true,显示它。
我知道bootstrap有.popover(‘show’)为此,但我不应该告诉角关于dom,所以我不知道我将如何访问$(元素).popover()if在自定义表单控制器函数中执行此操作。我缺少什么?
更新
重复投票中提到的解决方案仍然只显示mouseenter上的popover。我想强制它显示,好像做了$(‘#popover_id’)。popover(‘show’)。
您还可以构建自己的扩展触发器。这将适用于工具提示和Popover。
原文链接:https://www.f2er.com/angularjs/145526.html首先扩展Tooltip触发器如下:
// define additional triggers on Tooltip and Popover app.config(['$tooltipProvider',function($tooltipProvider){ $tooltipProvider.setTriggers({ 'show': 'hide' }); }]);
然后在HTML标签上定义触发器,如下所示:
<div id="RegisterHelp" popover-trigger="show" popover-placement="left" popover="{{ 'Login or register here'}}">
现在你可以从JavaScript调用hide和show,这是一个显示在3秒。
$("#RegisterHelp").trigger('show'); //Close the info again $timeout(function () { $("#RegisterHelp").trigger('hide'); },3000);