在AngularJS expression中插入html – 学习画板

首页 » 记事本 » 在AngularJS expression中插入html

在AngularJS expression中插入html

有时候我们需要在angular表达式中写入html结构并被浏览器解析,而不是当作字符串来处理,如下所示:

<!DOCTYPE html>
<html ng-app="app">

<head>
    <title>angular</title>
    <meta charset="utf-8">
    <script src="angular.js"></script>
</head>

<body>
    <div ng-controller="test">
        <p>{{data}}</p>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('test', function($scope) {
        $scope.data = "<strong>angular</strong>表达式";
    });
    </script>
</body>

</html>

但结果却输出:

<strong>angular</strong>表达式

此时我们可以定义一个html过滤器来达到预期的效果:

<!DOCTYPE html>
<html ng-app="app">

<head>
    <title>angular</title>
    <meta charset="utf-8">
    <script src="angular.js"></script>
</head>

<body>
    <div ng-controller="test">
        <p ng-bind-html="data | html"></p>
    </div>
    <script>
    var app = angular.module('app', []);
    app.controller('test', function($scope) {
        $scope.data = "<strong>angular</strong>表达式";
    });
    app.filter('html', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        };
    }]);
    </script>
</body>

</html>
此文章发表在 记事本 标签为 . 将固定链接加入收藏.