Question

我的控制器如下：

   myApp.controller('actionEditController', ['$scope', '$stateParams', '$sce',function ($scope, $stateParams, $sce) {
        $scope.table="<p>OOPSY</p>";
        $scope.test="<p>TEST</p>";
            $.get(apiHost + "/action/entity/" + $stateParams.id)
                .success(function (response) {
                    var action = response['RESPONSE'];
                    action.params = JSON.parse(action.paramsJson);
                    $scope.$apply(function () {
                        $scope.table = $.hbs("/templates/action.hbs", action);
                    });
                    console.log(" table is "+$scope.table);
                })
                .error(function (jqXHR, textStatus, errorThrown) {
                    console.error("Error retrieving action");
                });
    }]);

console.log（table）的输出是：

<div>
    <input name="name" type="text" value="EXPIRY_SM00004_BROWSED"/>
    <input name="id" type="text" readonly="readonly" value="AC0000E1"/>
    <input name="type" type="text" readonly="readonly" value="SCHEDULE"/>
        <input name="priority" type="text" value="LOW"/>
            <input name="eventName" type="text" value="expiry.SM00004.browsed"/>
            <input name="space" type="text" value="hybrid"/>
            <input name="at" type="number" value=59400000/>
            <input name="on" type="number" value=172800000/>
</div>
<script src="lib/angular/angular-sanitize.min.js"></script>

我的html文件：

<div ng-app="broConsoleApp" ng-controller="actionEditController" >
    <h2 class="marcellus text-center"> EDIT ACTION </h2>
    <div ng-bind-html="table">
    </div>
    <div ng-bind-html="test"></div>
</div>

test正在打印，但table未打印。我认为这是因为输出中有一些新的行字符？我尝试用以下代替它们： $scope.table.replace(/\n/g,'')）但是我仍然没有得到表的输出。有人请帮我格式化这个渲染输出，以便ng-bind可以绑定它。

Answer 1

我认为关于特殊字符等的html没有任何问题。我开始认为ngBindHtml根本无法解决这个问题。

请检查plunker：http://plnkr.co/edit/PcAUERYziJtw0k1f1XjT?p=preview

我拿了plunker from angular JS并对其进行了修改，只是在你的html中添加了一个输入按钮而且它没有渲染。

$scope.myHTML =
       'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>' + 
       '<input name="name" type="text" value="EXPIRY_SM00004_BROWSED"/>';

Answer 2

似乎与$sce.trustAsHtml合作：

视图：

<div ng-app="app" ng-controller="Ctrl">
    <div ng-bind-html="table"></div>
    <div ng-bind-html="test"></div>
</div>

JS：

angular.module('app', [])
.controller('Ctrl', function($scope, $sce) {
  $scope.table = $sce.trustAsHtml('<p>this is a test</p>');
  $scope.test = $sce.trustAsHtml('<h3>TEST</h3>');
});

工作示例：https://jsfiddle.net/r646z10y/1/

ng-bind-html无法解析正确的HTML并将其绑定

2 个答案: