Question

我正在使用angularjs。 Bootstrap模板。我正在寻找一种方式来显示我标签的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＃标签在＆＃34;这是一个测试＆＃34;可以正确呈现。

Answer 1

在我的情况下使用textarea但我希望这可以帮助你制作一个类似的形式类型，带有可以在标签中使用html的复选框

我创建了一个新类型的caled textareaHtml，它只是扩展了＆＃39; textarea＆＃39;并使用这个包装＆＃39; labelHtml＆＃39;用

加载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指令）。
默认复选框表格模板在组件中有一个嵌入式标签，因此无法使用开箱即用的标签，这就是为什么创建我们自己的类型更简单。

形式自助。如何用html显示标签？

2 个答案: