Question

我必须通过angullar js数据传递html代码

 this.items = [
  {
    'title': 'Angular',
    'icon': 'angular',
    'description': " <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.",
    'color': '#E63135'
  },
  {
    'title': 'CSS3',
    'icon': 'css3',
    'description': '<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>  The latest version of cascading stylesheets - the styling language of the web!',
    'color': '#0CA9EA'
  },
  {
    'title': 'HTML5',
    'icon': 'html5',
    'description': 'The latest version of the web\'s markup language.',
    'color': '#F46529'
  },]

在视图html

中

不工作

纳克绑定-HTML = “item.description”
不工作

Answer 1

＆＃34;默认情况下，生成的HTML内容将使用$ sanitize服务进行清理。要使用此功能，请确保$ sanitize可用＆＃34; 为了在模块的依赖项中使用ngSanitize，您需要包含＆＃34; angular-sanitize.js＆＃34;在你的申请中。

您也可以绕过您知道安全的值的清理工作。为此，请通过$ sce.trustAsHtml绑定到显式受信任的值。请参阅严格上下文转义（SCE）下的示例。

https://docs.angularjs.org/api/ng/directive/ngBindHtml

https://docs.angularjs.org/api/ng/service/ $ SCE＃节目-ME-AN-示例-使用-SCE -

Answer 2

将过滤器与 $sce.trustAsHtml

一起使用

 myApp.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

<强>样本

＆＃13;

var myApp=angular.module('myApp',[]);
 myApp.controller('thecontroller',function(){
  
  this.items = [
  {
    'title': 'Angular',
    'icon': 'angular',
    'description': " <ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>A powerful Javascript framework for building single page apps. Angular is open source, and maintained by Google.",
    'color': '#E63135'
  },
  {
    'title': 'CSS3',
    'icon': 'css3',
    'description': '<ul><li>Coffee</li><li>Tea</li><li>Milk</li></ul>  The latest version of cascading stylesheets - the styling language of the web!',
    'color': '#0CA9EA'
  },
  {
    'title': 'HTML5',
    'icon': 'html5',
    'description': 'The latest version of the web\'s markup language.',
    'color': '#F46529'
  }];
  
});
 myApp.filter('trustHtml',function($sce){
  return function(html){
    return $sce.trustAsHtml(html)
  }
})

＆＃13;

<!DOCTYPE html>
    <html>
        <head>
          <title>ng-Messages Service</title>
          <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
            <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
        </head>
        <body ng-app="myApp">
            <div ng-controller='thecontroller as vm'>
                <div ng-repeat="item in vm.items ">
                 <div ng-bind-html="item.description |  trustHtml"></div>
                </div>
            </div>
        </body>
    </html>

＆＃13;

如何制作ng-bind-html angularjs代码

2 个答案: