显示字符串的HTML输入

Question

我想通过替换特殊文本来显示字符串中的HTML输入。

HTML代码如下。

<h3 class="text-center" data-ng-bind-html="finalString"></h3>

JS代码如下。

        function convertStringToInput(){
            var string = ' Hi,Cricket match with !!!TEXT!!! on !!!DATE!!! Umpire is !!!TEXT!!! and price is !!!NUMBER!!! items.';

            var mapObj = {
                '!!!TEXT!!!': '<input type="text" class="form-control" placeholder="Enter text" data-ng-model="text" />',
                '!!!DATE!!!': '<input type="date" class="form-control" placeholder="date" data-ng-model="model" />',
                '!!!NUMBER!!!': '<input type="number" class="form-control" placeholder="Enter Number" data-ng-model="number" />'
            };
            string = string.replace(/!!!TEXT!!!|!!!DATE!!!|!!!NUMBER!!!/gi, function (matched) {
                return mapObj[matched];
            });

            $scope.finalString = string;
        }
        convertStringToInput();

期待的就像!!!文字!!!用HTML输入替换为文本框，!!! DATE！与datepicker和!!! NUMBER！输入类型为数字。

Answer 1

包含在HTML中

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js"></script>

X.Y.Z是你的angularjs版本

然后在app模块的javascript文件中添加ngSanitize，例如：

angular.module('nameOfYourAppModule', ['ngSanitize'])

然后在控制器中注入$ sce依赖，并添加$ scope.finalString = $ sce.trustAshtml（string）;

.controller('myController', function(
    $scope,
    $sce
) {
function convertStringToInput(){
            var string = ' Hi,Cricket match with !!!TEXT!!! on !!!DATE!!! Umpire is !!!TEXT!!! and price is !!!NUMBER!!! items.';

            var mapObj = {
                '!!!TEXT!!!': '<input type="text" class="form-control" placeholder="Enter text" data-ng-model="text" />',
                '!!!DATE!!!': '<input type="date" class="form-control" placeholder="date" data-ng-model="model" />',
                '!!!NUMBER!!!': '<input type="number" class="form-control" placeholder="Enter Number" data-ng-model="number" />'
            };
            string = string.replace(/!!!TEXT!!!|!!!DATE!!!|!!!NUMBER!!!/gi, function (matched) {
                return mapObj[matched];
            });


            $scope.finalString = $sce.trustAsHtml(string);
            console.log($scope.finalString);
        }
        convertStringToInput();
});

进一步阅读的来源：https://docs.angularjs.org/api/ng/service/ $ sce