AngularJS双大括号表示法中渲染HTML [英] AngularJS render HTML within double curly brace notation

问题描述

我有一个包含HTML JSON变量。

这样做： {{} source.HTML} 角是显示＆放大器; LT; 和＆放大器; GT; 而不是＆LT; 和＆GT;

我能做些什么有角呈现实际的HTML？

搜索结果
更新：结果
这是我的控制器：结果

  app.controller（'objectCtrl'，['$范围，$ HTTP，$ routeParams'，
  功能（$范围，$ HTTP，$ routeParams）{    变种的productId =（$ routeParams.productId ||）;    $ http.get（templateSource +'/对象吗？我='+的productId）
       。然后（功能（结果）{
          $ scope.elsevierObject = {};
          angular.extend（$范围，result.data [0]）;
        }）;
  }]）;
 

在我的HTML然后我就可以使用：

 ＆LT; D​​IV＆GT; {{foo.bar.theHTML}}＆LT; / DIV＆GT;
 

解决方案

你想的显示的的HTML（如＆LT; B＆GT;你好＆LT; / B＆GT; ）或渲染的在HTML（例如您好）？

• 如果你想显示它的花括号就够了。但是，如果你有HTML有HTML实体（如＆放大器; LT;东西），你需要手动UNESCAPE它，请参阅this SO质疑。




• 如果您想渲染它，你需要使用 NG-绑定-HTML 指令，而不是curcly支架（其中，仅供参考，是一种快捷方式在 NG-绑定指令）。你需要告诉角度喷射到该指令内容的安全性，使用 $ sce.trustAsHtml 。

请参阅例如以下两种情况：

\r

\r

angular.module（测试，[]）。控制器（CTRL ，功能（$范围，$ SCE）{\r
  $ scope.HTML ='＆LT; B＆GT;您好＆LT; / B＆GT;';\r
  \r
  $ scope.trust = $ sce.trustAsHtml;\r
}）;

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=测试NG-控制器=CTRL＆GT;\r
  ＆LT; D​​IV＆gt;显示：{{} HTML}＆LT; / DIV＆GT;\r
  ＆LT; D​​IV＆GT;渲染：LT;跨度NG绑定-HTML =信托基金（HTML）＆GT;＆LT; / SPAN＆GT;＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT;

\r

\r

\r

I have JSON variables that contain HTML.

By doing: {{source.HTML}} Angular is showing < and > instead of < and >.

What can I do to have Angular render the actual HTML?

UPDATE:
This is my controller:

app.controller('objectCtrl', ['$scope', '$http', '$routeParams',
  function($scope, $http, $routeParams) {

    var productId = ($routeParams.productId || "");

    $http.get(templateSource+'/object?i='+productId)
       .then(function(result) {
          $scope.elsevierObject = {};
          angular.extend($scope,result.data[0]);
        });
  }]);

Inside my HTML i can then use:

<div>{{foo.bar.theHTML}}</div>

解决方案

Do you want to show the HTML (like <b>Hello</b>) or render the HTML (like Hello) ?

• If you want to show it, the curly bracket is enough. However if the html you have has html entities (like <stuff) you need to manually unescape it, see this SO question.

• If you want to render it, you need to use the ng-bind-html directive instead of curcly bracket (which, FYI, is a shortcut to the ng-bind directive). You need to tell Angular that the content injected into that directive is safe, using $sce.trustAsHtml.

See example of both cases below:

angular.module('test', []).controller('ctrl', function($scope, $sce) {
  $scope.HTML = '<b>Hello</b>';
  
  $scope.trust = $sce.trustAsHtml;
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="ctrl">
  <div>Show: {{HTML}}</div>
  <div>Render: <span ng-bind-html="trust(HTML)"></span></div>
</div>

这篇关于AngularJS双大括号表示法中渲染HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！