如何通过angularjs中的ng-show触发bootstrap popover

时间:2013-12-17 20:29:54

标签: angularjs twitter-bootstrap triggers popover

我有以下工作代码:

<input 
    value="order.value"
    name="orderValue"
    ng-pattern="/^[0-9]{0,20}$/"
    handle-save="update()">
</input>
<div 
    class="text-primary 
    icon-exclamation-sign" 
    ng-show="form.value.$error.pattern">
    Only numbers are allowed
</div>

是否可以触发引导弹出而不是“仅允许数字”?它似乎只会通过鼠标点击或悬停触发...

1 个答案:

答案 0 :(得分:3)

对于此类互动,您可以使用directive并在其中scope.$watch观看“已显示”属性的更改并反映它们 - 调用'element.popover()'。

该指令看起来像这样

directive('popover', function () {
  return {
    restrict: 'A',
    scope: {
      shown: '=',
    },
    link: function(scope, element) {
      scope.$watch('shown', function(shown) {
        if (shown) {
          element.popover('show');
        } else {
          element.popover('hide');
        }
      });
    }
  };
});

您可以像<div popout shown="form.value.$error.pattern">

一样使用它