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

我正在使用angularjs formly。 Bootstrap模板。我正在寻找一种方法来显示HTML代码我标签。现在，他们正在逃跑时显示形式自举。如何用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', 
    } 
    } 
];

我预期中的“这是一个测试”标签可以正确显示。

来源

2016-03-04 David Weng

向我们显示您的代码。 – csmckelvey

http://jsbin.com/zofafe/2/edit?html,js输出 –

把你的实际代码放在你的实际问题中，而不是评论链接。 – csmckelvey

在我的情况与textarea的，但我希望这会帮助你做出与复选框类似formly类型，可以在标签使用HTML

我创建一个新的类型caled textareaHtml，它只是延长“文本区域”和使用这种包装 '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'] 
    }); 
});

来源

2016-05-01 18:46:47 imaginabit

这看起来不错，但标签中的html标签仍然被转义，显示与{{to.label}}相同，它似乎是to.label中的html已经逃脱。 –

你可以在这里看到你的代码的结果 - http://jsbin.com/kuseqosoro/edit?html,js,output –

我固定@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

只有两个意见：

这是需要有角的sanitize库，这将使得模板做工精细（NG绑定，HTML指令）。
缺省复选框formly模板在组件中有一个嵌入式标签，所以不可能使用那个开箱即用的，这就是为什么创建我们自己的类型更简单。

来源

2017-02-28 23:40:29

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

回答

相关问题