Формально бутстрап. Как мне показать ярлык с HTML?

Question

Я использую 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 в "Это тест" может отображаться правильно.

Answer 1

В моем случае с textarea, но я надеюсь, что это поможет вам сделать подобный тип с флажком, который может использовать 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']
  });
});

Answer 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

Всего два замечания:

• Нужно иметь библиотеку углового санации, и это будет работать нормально (директива ng-bind-html).
• Стандартный шаблон флажка имеет встроенную метку в компоненте, поэтому использовать его из коробки невозможно, поэтому проще создать наш собственный тип.