向角度正式字段添加工具提示/鏈接

Question

我目前正在使用angular form來生成我的表單...它一直很好用，但是現在我遇到了一個問題，我無法為表單添加工具提示。

當用戶將鼠標懸停在輸入或其旁邊時，我理想情況下需要工具提示。

我制定了一條指令，允許我將工具提示添加到各個字段。

正式地：

        {
          className: "row",
          fieldGroup: [
            {
              fieldGroup: [
                {
                  key: 'page',
                  type: 'horizontalInputFees',
                  name: 'Number of Pages',
                  templateOptions: {
                    label: '# of pages',
                    type: 'number',
                    max: 100,
                    min: 0,
                    maxlength: 3,
                    onFocus: hideFieldErrors,
                    onBlur: showFieldErrors
                  },
                  validation: addValidation()
                }
              ]
            }
          ]
        }

我想在字段旁邊添加工具提示指令：

              <li>
                <custom-tooltip id="main-search-tt" placement="'right'" icon-class="'icon-question-circle'">
                  <a ui-sref="pages">Pages</a>
                </custom-tooltip>
              </li>

我想我的問題是....有什么辦法可以在特定形式的字段/輸入旁邊添加html？

Answer 1

您不需要發出指令，只需包裝標簽或bootstrapLabel模板即可：

app.config(function (formlyConfigProvider) {
        formlyConfigProvider.setWrapper([{name: 'bootstrapLabel',
            overwriteOk: true,
            template: '<div>' +
                       '<style> .tooltip-inner {max-width: 375px;}</style>' +    
                       '<label for="{{id}}" class="control-label {{to.labelSrOnly ? \'sr-only\' : \'\'}}" ng-if="to.label">' +
                       '{{to.label}}' +
                       '{{to.required ? \'*\' : \'\'}}' +
                       '</label><i style="margin-left: 5px;" ng-if="to.tooltip" class="control-label-help glyphicon glyphicon-question-sign" uib-tooltip-html="to.tooltip.content" tooltip-is-open="false" tooltip-trigger="mouseenter"></i>' +
                       '<formly-transclude></formly-transclude>'+
                       '</div>'
        }]);

然后，您將像這樣使用它：

    templateOptions: {
      label: 'Test',
       options: [{ value: 'testID', name: 'Test ID' }, { value: 'Test ID', name: 'Test2 ID' }],
       tooltip: {
       content: $sce.trustAsHtml('Test this out <br\> You can write HTML in here <br\> <b>Bold</b> <i>italics</i> <ul><li>part of a list</li></ul> <br\> ')}
}

這將在標簽旁邊顯示一個UI-Bootstrap工具提示，當您將鼠標懸停在其上方時，該提示會打開。 您可以在templateOptions內的工具提示內容中編寫HTML，它將正確設置其格式。