angular-ui-bootstrap - 正式引导。如何用 html 显示标签？

Question

我正式使用angularjs。 Bootstrap 模板。我正在寻找一种方法来显示我标记的 html 代码。现在它们在显示时被转义了

这是formly字段

vm.fields = [
  {
    key: 'awesome',
    type: 'checkbox',
    templateOptions: { label: 'this is a <a href="test">test</a>' }
  },
  {
    key: 'exampleDirective',
    template: '<div example-directive></div>',
    templateOptions: {
      label: 'Example Directive',
    }
  }
];

我希望“这是一个测试”中的 A 标签可以正确呈现。

Answer 1

在我的例子中有一个文本区域，但我希望这能帮助你制作一个类似的带有复选框的形式类型，可以在标签中使用 html

我创建了一个新类型的 caled textareaHtml，它只是扩展了“textarea”并使用这个包装器“labelHtml”来加载 html

'<span ng-bind-html="to.label" ></span>',

这里是代码

app.run(function(formlyConfig ) {
   formlyConfig.setWrapper(
    {
      name: 'labelHtml',
      template: [
        '<div>',
          '<label for="{{id}}" class="control-label {{to.labelSrOnly ? \'sr-only\' : \'\'}}" ng-if="to.label">',
            '<span ng-bind-html="to.label" ></span>',
            '{{to.required ? \'*\' : \'\'}}',
          '</label>',
          '<formly-transclude></formly-transclude>',
        '</div>'
      ].join(' ')
    }
  );
  formlyConfig.setType({
    name: 'textareaHtml',
    extends: 'textarea',
    wrapper: ['labelHtml', 'bootstrapHasError']
  });
});