将角色绑定对象元素转换为HTML [英] Angular bind object element to HTML

问题描述

我从另一个问题获得了代码，它很直接，并且工作正常。

 < div ng-controller =ExampleController > 
< p ng-bind-html =testHTML>< / p> 
（function（angular）{
'use strict'; 
 angular.module（'bindHtmlExample'，['ngSanitize']）
 .controller（'ExampleController'，['' $ scope''，$ function $（$ scope）{
 $ scope.testHTML ='我是一个< code> HTML< / code>字符串，'+ 
'< a href =＃> ; links！< / a>和其他< em>东西< / em>'; 
}]）; 
}）（window.angular）; 
  

假设我得到一个对象并且想显示对象的一个​​元素

  var obj = {
 title：'Title'，
 description：'我是< code> HTML< ; / code>带有'+ 
'的字符串< a href =＃>链接！< / a>和其他< em>东西< / em>'
}; 
 $ scope.testHTML = obj; 
  

那么我应该如何绑定html结尾的描述呢？
我试过
< p ng-bind-html ={{testHTML.description}}>< / p> 和
< p ng-bind-html =testHTML.description>< / p>

plnkr示例

尝试此代码片段来绑定HTML

>

现在，您可以通过编写 yourHTML | html ，这将完成这项工作。

data-console =truedata-babel =false>

< script src =https：/ /ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js\"></script><div ng-app =myAppng-controller =GreetingController> < b>使用自定义过滤器< / b> < div ng-bind-html =testHTML.description | html>< / div> < div ng-bind-html =testHTML.description1 | html>< / div> <峰; br /> < b>通过在控制器内使用$ SCE< / b> < div ng-bind-html =htmlSafe>< / div>< / div>

I got the code from another question and it's straightforward and working fine

<div ng-controller="ExampleController">
<p ng-bind-html="testHTML"></p>
(function(angular) {
  'use strict';
  angular.module('bindHtmlExample', ['ngSanitize'])
  .controller('ExampleController', ['$scope', function($scope) {
       $scope.testHTML = 'I am an <code>HTML</code>string with ' +
                         '<a href="#">links!</a> and other <em>stuff</em>';
  }]);
})(window.angular);

Suppose, I'm getting an object and I want to show an element of the object

var obj = {
   title: 'Title',
   description: 'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>'
};
$scope.testHTML = obj;

Then how should I bind only the description on the html end? I've tried <p ng-bind-html="{{testHTML.description}}"></p>and <p ng-bind-html="testHTML.description"></p>

plnkr example

解决方案

Try this snippet to bind HTML

Firstly, you can create custom filter to bind the HTML in AngularJS.

Now, you can use this filter anywhere into the myApp module by just writing yourHTML | html, That will done the job.

var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope','$sce', function($scope, $sce) {
  var obj = {
     title: 'Title',
     description: 'I am an <code>HTML</code>string with ' +
       '<a href="#">links!</a> and other <em>stuff</em>',
     description1: 'I am an <b>HTML</b>string with ' +
       '<a href="#">links!</a> and other <u><b>stuff</b></u>'
    
  };
  $scope.testHTML = obj;
  
  //Use $SCE in controller
  var preview_data = obj.description;
  $scope.htmlSafe = $sce.trustAsHtml(preview_data);
  
}]);
//Custom filter (Alternate way)
myApp.filter('html', ['$sce', function ($sce) { 
    return function (text) {
        return $sce.trustAsHtml(text);
    };    
}])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="GreetingController">
  
  <b>By using custom filter</b>
  <div ng-bind-html="testHTML.description | html"></div>
  <div ng-bind-html="testHTML.description1 | html"></div>

  <br/>
  <b>By using $SCE inside controller</b>
  <div ng-bind-html="htmlSafe"></div>

</div>

这篇关于将角色绑定对象元素转换为HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！