如何将工具提示添加到用户界面多选

Question

我尝试在ui select的输入框中添加工具提示，但不起作用。

input（type='hidden'，ui-select2='serSelect2options'，data占位符="所有用户"，ng模型="筛选的选定用户"，style='宽度：100%；左边距：5px；'，ng readonly='isUserSelectDisabled'，工具提示='请选择至少一个用户）

此外，我为上述相同的输入标记添加了简单的HTML标题属性，而不是工具提示，最初它可以设置标题，但当我试图更改或删除标题时，它对我来说不起作用

input（type='hidden'，ui-select2='serSelect2options'，data占位符="所有用户"，ng模型="筛选的选定用户"，style='宽度：100%；左边距：5px；'，ng readonly='isUserSelectDisabled'，title='请选择至少一个用户）

如何在ui-select2中为输入框添加工具提示？

Answer 1

您可以在模板缓存中添加标题，以引导主题为例

$templateCache.put("bootstrap/match-multiple.tpl.html","<span class="ui-select-match"><span ng-repeat="$item in $select.selected"><span title='{{$item.caption}}' class="ui-select-match-item btn btn-default btn-xs" tabindex="-1" type="button" ng-disabled="$select.disabled" ng-click="$selectMultiple.activeMatchIndex = $index;" ng-class="{'btn-primary':$selectMultiple.activeMatchIndex === $index, 'select-locked':$select.isLocked(this, $index)}" ui-select-sort="$select.selected"><span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span> <span uis-transclude-append=""></span></span></span></span>");

Answer 2

我遇到了和您相同的问题，并通过创建一个扩展原始指令的自定义uiSelect指令解决了这个问题，就像这样：

angular.module('myModule')
  .directive('uiSelect', function ($compile) {
    return {
      link: function postLink(scope, element, attrs) {
        var input = angular.element(element.find('input')[0]);
        if (attrs.ttpMsg) {
          input.attr('tooltip', attrs.ttpMsg);
          $compile(element.contents())(scope);
        }
      }
    };
  });

在视图中：

<ui-select ng-model="myModel" ttp-msg="{{myMessage}}">
  <!-- custom stuff -->
</ui-select>

请注意，我使用了一个自定义属性（ttp-msg），这样我就不必从元素中删除原始的"工具提示"属性，这可能会导致工具提示指令重复（一个用于父级，另一个用于输入或子级）。

我尝试过其他一些方法，但这是一个真正有效的方法，尽管我必须注意，我不确定$compile函数是否会给指令或控制器带来更多开销。

在您的示例中，我猜您正在将属性添加到输入中，但您还需要告诉angular您已经对模板进行了一些更改，这就是$compile的作用。

我想这也可以通过装饰师来实现，但我必须等待更多的时间来进行实验

希望这能有所帮助。