Question

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

Multiple directives [datepickerPopup, tooltipHtmlUnsafe] asking for new/isolated scope on: <input

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

是否有一些简单的方法可以使用对datepicker输入的关注来导致工具提示弹出，即使输入字段无法获得tooltip指令？

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

我有一个带有隔离范围的字段指令，该范围涵盖输入和与之关联的标签，因此这是我必须使用的上下文类型。

Answer 1

是的，有一个解决方法，但它只是：一个解决方法。这是一个带有AngularUI的known issue。

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

<!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>

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

当您无法将工具提示添加到<input element =“”/>时，在焦点上弹出工具提示

1 个答案: