Question

我尝试在ui-select中将工具提示添加到输入框，但它无效。

输入（type ='hidden'，ui-select2 ='userSelect2options'， data-placeholder ='所有用户'，ng-model ='selectedUsersForFilter'，风格='宽度：100％; margin-left：5px;'，ng-readonly ='isUserSelectDisabled'，tooltip ='Please 选择至少一个用户'）

同样代替工具提示，我为上述相同的输入标记添加了简单的HTML title 属性，最初它能够设置标题但当我尝试更改或删除该标题时我没有工作。

输入（type ='hidden'，ui-select2 ='userSelect2options'， data-placeholder ='所有用户'，ng-model ='selectedUsersForFilter'，风格='宽度：100％; margin-left：5px;'，ng-readonly ='isUserSelectDisabled'， title ='Please 选择至少一个用户'）

如何在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），因此我不必删除原始的工具提示＆＃39;元素的属性，可能导致工具提示指令重复（一个用于父项，另一个用于输入或子项）。

我已尝试过其他一些方法，但这是实际工作的方法，但我必须注意，我不确定$ compile函数是否会给指令或控制器带来更多开销。

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

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

希望这有帮助。

如何将工具提示添加到ui多选

2 个答案: