javascript - angular js中禁用div的工具提示

Question

我是 angularjs 的新手。实际上，在发布这个问题之前，我已经搜索了很多，我发现了这个问题的不同答案，但没有一个对我有用。所以，我也尝试了 css。我在这里使用 input type="file" 并且为此我的代码就像 -

<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
                                <span class="glyphicon glyphicon-folder-open"></span>
                        <span class="file-preview-input-title">BrowseFolder</span>
                         <input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf"
                                name="input-file-preview" />
                    </div>
                    <div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isFolderSelected">
                        <span class="glyphicon glyphicon-file"></span>
                        <span class="file-preview-input-title">BrowseFile</span>
                        <input type="file" ng-click="clearFileName()" file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview"
                        />
                    </div>

现在在这段代码中我有一些变量，比如 - isSingleFileSelected 在此基础上我启用和禁用。现在我想要一个 tooltip 即使它被禁用。所以，我在这里尝试通过在输入类型上添加 ng-disabled 但用户可以点击该字段，它被禁用但仍然如此。所以，我添加了 ng-disabled 在 div 本身上，所以现在 用户无法单击输入类型 但无法显示工具提示 to enable this do this 。任何人都可以在这里帮助我。提前致谢。

Answer 1

好的，这是一个非常清楚的解释:

事件不会在 javascript 中的禁用表单元素上触发。

这里最简单的解决方案是将您的输入标签包装在一个元素中，并在包装​​元素而不是 div 中显示您的工具提示。像这样:

<div class="btn btn-info btn-labeled file-preview-input" ng-disabled="isSingleFileSelected">
       <span class="glyphicon glyphicon-folder-open"></span>
       <span class="file-preview-input-title">BrowseFolder</span>
       <div ng-mouseover="showTooltip()">
           <input type="file" ng-click="clearFileName()" id="uploadId" webkitdirectory directory multiple file-upload="myFile" accept=".txt, .rtf, .pdf, .doc, .docx, .rtx, .odt, .sxw, .wpd, .odf" name="input-file-preview" />
       </div>
</div>