1

我正在使用工具提示进行错误解释和着色以指示错误。在我的日期选择器字段中，我对需要显示的日期范围进行了一些验证。但是，如果我尝试将日期选择器和工具提示放在同一个输入元素上，我会得到

多个指令 [datepickerPopup, tooltipHtmlUnsafe] 要求新的/隔离的范围：<input

在我从使用 bootstrapjs 代码处理工具提示的旧版本“升级”到 angular-bootstrap 之前，这不是问题。

是否有一些简单的方法可以使用日期选择器输入上的焦点来弹出工具提示，即使输入字段无法获取工具提示指令？

现在我把它作为一个悬停在标签上，就像你电视上的潜意识信息一样明显。

我有一个带有隔离范围的字段指令，它涵盖了输入和与之关联的标签，所以这就是我必须使用的上下文。

4

1 回答 1

0

是的，有一种变通方法，但就是这样：一种变通方法。这是AngularUI的一个已知问题。

解决方案是将您的输入包装在另一个元素中，并将工具提示指令放在包装元素上，如下所示：

<!doctype html>
<html ng-app="plunker">

<head>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
  <script src="example.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-controller="DatepickerDemoCtrl" style="padding-top:40px">
  <span tooltip="Set date">
    <input type="text" class="form-control" ng-click="opened = !opened" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" datepicker-options="dateOptions" />
  </span>
</body>

</html>

这可能不适用于所有情况，但适用于大多数情况。

于 2014-07-17T01:42:37.353 回答