1

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

input(type='hidden', ui-select2='userSelect2options', data-placeholder='All User', ng-model='selectedUsersForFilter', style='width:100%; margin-left:5px;',ng -readonly='isUserSelectDisabled', tooltip='请选择至少一个用户')

此外，我为上述相同的输入标签添加了简单的 HTML标题属性，而不是工具提示，最初它能够设置标题，但是当我尝试更改或删除该标题时，它对我不起作用。

input(type='hidden', ui-select2='userSelect2options', data-placeholder='All User', ng-model='selectedUsersForFilter', style='width:100%; margin-left:5px;',ng -readonly='isUserSelectDisabled', title ='请至少选择一个用户')

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

4

2 回答 2

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>");
于 2016-05-10T01:58:47.370 回答
0

我遇到了与您相同的问题并解决了它，创建了一个扩展原始指令的自定义 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 的用途。

我认为这也可以通过装饰器来实现，但我必须等待有更多时间来试验它。

希望这可以帮助。

于 2015-07-08T18:39:36.233 回答