Question

我正在使用Angular框架在我的应用中填充我的数据。

我的数据包含html标记

就像

$scope.test = <p>this is a test<?p><strong>Bold text here...</strong>

在我的HTML中

<div>
   {{test}}
</div>

浏览器上的输出显示确切的文字“<p>this is a test</p> <strong>Bold text here...</strong>”。我希望它解析html标签并显示'

这是一个测试

粗体文字...... 。

这可能吗？

非常感谢！

Answer 1

您可以这样做：

<div ng-bing-html-unsafe="test"></div>

或

$scope.test = $sce.trustAsHtml('<p>this is a test<?p><strong>Bold text here...</strong>');

取决于您需要做什么以及您正在使用的角度版本。刚刚看到你说1.2，所以最有可能是最后一个。对于$ sce，您显然需要注入$ sce：

myApp.controller('myCtrl', ['$scope', '$sce', function($scope, $sce) {
   $scope.test = $sce.trustAsHtml('<p>this is a test<?p><strong>Bold text here...</strong>');
});

Answer 2

制定指令，将文本解析为html内容。像

app.directive('bindUnsafeHtml', ['$compile', function ($compile) {
      return function(scope, element, attrs) {
            console.log("in directive");
          scope.$watch(
            function(scope) {
              // watch the 'bindUnsafeHtml' expression for changes
              return scope.$eval(attrs.bindUnsafeHtml);
            },
            function(value) {
              // when the 'bindUnsafeHtml' expression changes
              // assign it into the current DOM
              element.html(value);

              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
            }
        );
    };
}]);

之后你可以使用：

 <div bind-unsafe-html="test">

不要忘记在angular

的配置中注入您的指令

希望这会对你有所帮助。

如何在我的应用程序中显示html数据？

2 个答案: