如何在模板Angular中替换HTML

Question

I have a variable that stores data

this.storage = { decription: 'text <br> info \n' };

In html I bring it

<div> {{ ::$ctrl.storage.decription }} </div>

However, the text is displayed without any formatting, but I would like it to be like html, how to fix it?

Answer 1

Use ng-bind-html="scopevar"

in example:

<div ng-bind-html="$ctrl.storage.decription"></div>

further details can be found here

Answer 2

使用ng-bind-html ：

<div ng-bind-html="ctrl.storage.description"></div>

Answer 3

either you can use

this.storage = { decription: $sce.trustAsHtml('text <br> info \n')};
and use ng-bind-html

or write a directive for this,

(function() {
    'use strict'; 
    angular
        .module('app')
        .directive('dynamic', dynamic);

    dynamic.$inject = ['$compile'];

    function dynamic($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function (scope, ele, attrs) {
                scope.$watch(attrs.dynamic, function(html) {
                    ele.html(html);
                    $compile(ele.contents())(scope);
                });
            }
        };
    };
})();

and it can use as

<div dynamic="$ctrl.storage.decription"></div>

Answer 4

Basically to use ng-bind-html you need to tell angular that the HTML content string is trusted to know more about this you can refer this article in angular docs,so to that add below code in your JS

$scope.storage.description =   $sce.trustAsHtml('text <br> info \n');

But simply this line will throw you an error saying 'unknown provider' to use that you need to have angular-sanitize.js in order to inject $sce in your controller and ngSanitize in your angular module like var app = angular.module('app',['ngSanitize']);

 var app = angular.module('app',['ngSanitize']); app.controller('Ctrl',function($scope,$sce){ $scope.storage = {}; $scope.storage.description = $sce.trustAsHtml('text <br> info \\n'); }); 

 <script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script> <div ng-app="app" ng-controller="Ctrl"> <div ng-bind-html="storage.description"></div> </div>