angularjs ng-bind-html html 输入部分丢失

Posted

技术标签:

【中文标题】angularjs ng-bind-html html 输入部分丢失【英文标题】:angularjs ng-bind-html html input part missing 【发布时间】:2015-09-22 18:16:53 【问题描述】:

我已包含 ngSanitize 以在 bind-html 中显示 html 我的代码中有以下绑定:

$scope.discslist = '<div class="items text-center"><img src="assets/uploads/discs/'+obj.image+'" class="img-circle"><br><input type="radio" id="chkDisc'+obj.id+'" name="chkDisc" value="'+obj.id+'" required data-ng-model="formdata.disc"></div>';

在控制器中我已经包含了 $sanitize

它将 html 绑定到 ng-bind-html="disclist" div 但只添加了图像和 div,其中缺少输入元素:

<div class="items text-center"><img src="assets/uploads/discs/disc9.png" class="img-circle"><br></div>

我只想将 html 绑定到我的 div。

我正在使用 angularjs 1.4

【问题讨论】:

【参考方案1】:

这是我尝试过的。

JS

angular.module("test",['ngSanitize'])
.controller("testCtrl",['$scope','$sce',function($scope,$sce)

    $scope.discslist = '<div class="items text-center">'+
                        '<img src="assets/uploads/discs/test.png" class="img-circle"><br>'+
                        '<input type="radio" id="chkDiscid" name="chkDisc" value="1" required data-ng-model="formdata.disc">'+
                        '</div>';

                        $scope.discslist = $sce.trustAsHtml($scope.discslist);;

])

HTML

<body ng-controller="testCtrl">
    <div ng-bind-html="discslist"></div>

    <script type="text/javascript" src="angular.js"></script>
    <script type="text/javascript" src="angular-sanitize.js"></script>

</body>

确保您已包含 angular-sanitize.js 并注入 应用中的 ngSanitize 模块并在您的控制器中注入 $sce

【讨论】:

是的 trustAsHtml 有效。我有 angularjs min.js 所以不需要包含外部 sanitize.js

以上是关于angularjs ng-bind-html html 输入部分丢失的主要内容,如果未能解决你的问题,请参考以下文章

angularjs ng-bind-html的用法总结

ng-bind-html 不更新记录 angularjs 1.6

angularjs 可以加入html标签方法------ng-bind-html的用法总结

angularjs 可以加入html标签方法------ng-bind-html的用法总结

angularjs ng-bind-html html 输入部分丢失

angularjs中使用ng-bind-html和ng-include