Javascript 如何在JSON文件中使用HTML标记/属性_Javascript_Angularjs_Json

Javascript 如何在JSON文件中使用HTML标记/属性

javascript angularjs json

Javascript 如何在JSON文件中使用HTML标记/属性,javascript,angularjs,json,Javascript,Angularjs,Json,我有一个JSON文件，在对象中有一个html标记。是否可以使用此HTML属性 JS HTML 点击我 {{currentMessage}} 请尝试此选项以显示html属性 <div ng-bind-html="currentMessage"></div> 您需要与ng bind html一起使用。因此，您应该首先替换： <a>{{currentMessage}}</a> 以上内容将迫使Angular信任您的HTML代码段进行跨端脚本

我有一个JSON文件，在对象中有一个html标记。是否可以使用此HTML属性

HTML




点击我


{{currentMessage}}

请尝试此选项以显示html属性

<div ng-bind-html="currentMessage"></div>

您需要与

ng bind html一起使用。因此，您应该首先替换：
<a>{{currentMessage}}</a>

以上内容将迫使Angular信任您的HTML代码段进行跨端脚本编写
给你：

var-app=angular.module（'app'，[]）；
应用程序控制器（'mainCtrl'，函数（$scope，$sce）{
$scope.colors=[{
“颜色”：“红色”，
“值”：“f00”，
“消息”：“简单消息”
}, {
“颜色”：“绿色”，
“值”：“0f0”，
“消息”：“带有HTML标记的消息”
}, {
“颜色”：“蓝色”，
“价值”：“#00f”，
“信息”：“我要去工作吗？我不该去！”
}, {
“颜色”：“洋红”，
“值”：“f0f”，
“消息”：”
}]
$scope.currentMessage=“”；
$scope.popubtn=函数（消息）{
//设置当前消息
$scope.currentMessage=$sce.trustAsHtml（消息）；
//如果弹出窗口未打开，请打开它
如果（！（$scope.popublock））{
$scope.popublock=true；
}
}
});



点击我



<body ng-app="app">
    <div ng-controller="mainCtrl">
        <ul class="block-elements">
            <li ng-repeat="details in colors">
                <button ng-click="popupBtn(details.message)" ng-style="{ color: details.color }">Click Me</button>
            </li>
        </ul>

        <div class="alert-block" ng-class="{'popup-container': popupBlock}">
            <div>
                <a>{{currentMessage}}</a>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.min.js"></script>
    </div>
</body>

<div ng-bind-html="currentMessage"></div>

<a>{{currentMessage}}</a>

<a ng-bind-html="currentMessage"></a>

$scope.currentMessage = $sce.trustAsHtml(message);