Angular bind object element to HTML

人盡茶涼 提交于 2019-12-23 17:25:16

问题


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


回答1:


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>



回答2:


in plnkr example of html file:

change <p ng-bind-html="{{testHtml.desc}}"></p>to <p ng-bind-html="testHtml.desc"></p> as below:

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



回答3:


ng-bind-html doesn't require interpolation as it accepts an expression, so you only need to set it to testHtml.desc without the curly braces {{}}.

In your plunkr's controller you're assigning obj to $scope.testHtml before you declare obj itself, so it won't render anything since obj is undefined at assignment.

Plunkr: https://plnkr.co/edit/GvujCcYdCqLvwwnuEnWp?p=preview



来源:https://stackoverflow.com/questions/39381827/angular-bind-object-element-to-html

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