How to render raw html with AngularJS?

夙愿已清 提交于 2020-12-26 05:28:47

问题


I'm creating an AngularJS single page application. The data will be fetched from a webservice in json-format.

The problem is that some text elements come with preformatted html tags

json output:

{
   "text": "<p><span style="text-decoration: underline;"><strong>test text</string></span></p>"
}

Now how can I display this text and render the html directly, so that only "test" is shown to the user and the rest serves as markup?

<h1>{{data.text}}</h1>

回答1:


You need to add ng-bind-html="data.text" to your h1 tag.

Your html would look like:

<h1 ng-bind-html="data.text"></h1>

Documentation: ngBindHtml




回答2:


Update2: is it possible to strip the html for you? It could be done so:

angular.module('myApp.filters', []).
   filter('htmlToPlaintext', function() {
      return function(text) {
         return String(text).replace(/<[^>]+>/gm, '');
      };
   }
);

And you html:

<div>{{myText | htmlToPlaintext}}</div>

See more information: angularjs to output plain text instead of html

Update: do you really need the html from your json? It's better to store your html in the views and get the data from your json. Nice separation and very easy to use.

It's possible, but not so easy as non-html (great security).

In Angular 1.3 you need as follows:

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

In your controller add this:

$scope.htmlBind = $sce.trustAsHtml('<span>Hi, I am <em>Joe</em>');

Explanation: you see the $sce:

$sce is a service that provides Strict Contextual Escaping services to AngularJS.

trustAs(type, value)

Delegates to $sceDelegate.trustAs. As such, returns an object that is trusted by angular for use in specified strict contextual escaping contexts (such as ng-bind-html, ng-include, any src attribute interpolation, any dom event binding attribute interpolation such as for onclick, etc.) that uses the provided value. See * $sce for enabling strict contextual escaping.

Read more here:

  • https://docs.angularjs.org/api/ng/service/$sce
  • AngularJS : Insert HTML into view



回答3:


Try to use this https://docs.angularjs.org/api/ng/directive/ngBind

<script>
  angular.module('bindExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.name = 'Whirled';
    }]);
</script>
<div ng-controller="ExampleController">
  <label>Enter name: <input type="text" ng-model="name"></label><br>
  Hello <span ng-bind="name"></span>!
</div>


来源:https://stackoverflow.com/questions/31880234/how-to-render-raw-html-with-angularjs

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!