正式引导。如何用 html 显示标签？答案

【问题标题】：Formly bootstrap. How do I show label with html?正式引导。如何用 html 显示标签？
【发布时间】：2016-03-04 21:58:03
【问题描述】：

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

这里是正式的字段

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标签可以正常呈现。

【问题讨论】：

jsbin.com/zofafe/2/edit?html,js,output
将您的实际代码放在您的实际问题中，而不是评论链接。
有什么线索吗？似乎 to.label 中的标签文本已经转义，所以即使我在模板中使用 {{ to.label|unsafe }} ，它也不起作用。看来我需要取消它。
请创建您需要的最小表示，删除其他所有内容。
我不是我能提供的，我已经在jsbin上放了一个例子，在那里很容易看到。

标签： angular-ui-bootstrap angular-formly

【解决方案1】：

在我的情况下，使用 textarea，但我希望这可以帮助您使用可以在标签中使用 html 的复选框制作类似的正式类型

我创建了一个名为 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']
  });
});

【讨论】：

这看起来不错，但是标签中的html标签仍然被转义，显示与{{to.label}相同}，看来 to.label 中的 html 已经被转义了。
你可以在这里看到你的代码的结果 - jsbin.com/kuseqosoro/edit?html,js,output

【解决方案2】：

我修正了@imaginabit 的答案：

<script type="text/ng-template" id="checkboximp.html">
 <div class="checkbox">
      <label>
        <input type="checkbox"
               class="formly-field-checkbox"
               ng-model="model[options.key]">           
        {{to.required ? '*' : ''}}
        <div  ng-bind-html="to.label"> </div>
      </label>
    </div>     
</script>

/* global angular */
(function() {
  'use strict';

  var app = angular.module('formlyExample', ['formly', 'formlyBootstrap', 'ngSanitize'], function config(formlyConfigProvider) {
    // set templates here
   formlyConfigProvider.setType({
    name: 'checkboxHtml',
    extends: 'checkbox',
    templateUrl: 'checkboximp.html',
    wrapper: ['bootstrapHasError']
   });

  });


  app.controller('MainCtrl', function MainCtrl(formlyVersion) {
    var vm = this;
    // funcation assignment
    vm.onSubmit = onSubmit;

    // variable assignment
    vm.author = { // optionally fill in your info below :-)
      name: 'Kent C. Dodds',
      url: 'https://twitter.com/kentcdodds' // a link to your twitter/github/blog/whatever
    };
    vm.exampleTitle = 'Introduction';
    vm.env = {
      angularVersion: angular.version.full,
      formlyVersion: formlyVersion
    };

    vm.model = {
      awesome: true
    };
    vm.options = {
      formState: {
        awesomeIsForced: false
      }
    };

    vm.fields = [
      {
        key: 'awesome',
        type: 'checkbox',
        templateOptions: { label: 'this is a <a href="test">test</a>' }
      },

      {
        key: 'awesome2',
        type: 'checkboxHtml',
        templateOptions: { label: 'this is a <a href="test">from j. lennon</a>' }
      }     

    ];

    // function definition
    function onSubmit() {
      alert(JSON.stringify(vm.model), null, 2);
    }
  });

})();

http://jsbin.com/dunuyakiwe/2/edit?html,js,output

只有两个观察结果：

必须有 angular sanitize 库，这样才能使模板正常工作（ng-bind-html 指令）。
默认的复选框表单模板在组件中嵌入了标签，因此无法直接使用它，这就是创建我们自己的类型更简单的原因。

【讨论】：