Angular 将对象元素绑定到 HTML

Question

我从另一个问题中得到了代码，它很简单并且工作正常

<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);

假设，我正在获取一个对象，我想显示该对象的一个元素

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;

那怎么只绑定html端的描述呢？我试过了 和 

plnkr example

Answer 1

在 html 文件的 plnkr 示例中：

将更改为如下：

<body ng-app="bindHtmlExample">
  <div ng-controller="ExampleController">
 <p ng-bind-html=testHtml.desc></p>
</div>

Answer 2

ng-bind-html 不需要插值，因为它接受一个表达式，所以你只需要将它设置为 testHtml.desc 没有大括号 {{}}.

在您的 plunkr 控制器中，您在声明 obj 本身之前将 obj 分配给 $scope.testHtml，因此它不会呈现任何内容，因为 obj 在以下位置未定义作业。

笨蛋：https://plnkr.co/edit/GvujCcYdCqLvwwnuEnWp?p=preview

Answer 3

试试这个片段来绑定 HTML

首先，您可以创建自定义过滤器以绑定 AngularJS 中的 HTML。

现在，您只需编写 yourHTML | html，就可以在 myApp 模块的任何位置使用此过滤器，这就完成了工作。

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>

Angular 将对象元素绑定到 HTML

Angular bind object element to HTML

html

javascript

angularjs

ng-bind-html

ng-bind