Question

以下是我想要实现的内容：当用户输入一些文字时，我会找到字符a并使用<em>标记在另一个<label>中强调它，这是我的html标记：

    <div ng-controller="demoController">
        <input type="text" ng-model="input" />
        <label>{{emphasize()}}</label>  
    </div>

如上所示，我在emphasize中使用方法demoController来强调工作：

        myapp.controller('demoController', function ($scope) {
            $scope.input = 'Hello';
            $scope.emphasize = function () {
                return $scope.input.replace(/a/g, '<em>a</em>');
            }
        });

但结果是，角度转义<em>标签。例如，如果我输入apple，则标签会显示<em>a</em>pple，而不是我想要的： a pple。

那么为什么会这样呢？有没有办法可以防止这种情况或其他方式呢？

Answer 1

要做到这一点，一个简单的ng-bind-hmtl就可以解决问题：

<span ng-bind-html="emphasize()"></span>

但这不是很安全，所以在控制器上添加它总是更好：

myapp.controller('demoController', function ($scope, $sce) {
            $scope.input = 'angularJS';
            $scope.emphasize = function () {
                var res = $scope.input.replace(/a/g, '<em>a</em>');
                return $sce.trustAsHtml(res);
            }
        });

Answer 2

为您的模块添加过滤器：

myapp.filter('unsafe', ['$sce', function ($sce) {
    return function (a) { return $sce.trustAsHtml(a) };
}]);

并在您看来：

<span ng-bind-html="emphasize() | unsafe"></span

混淆角度表达式

2 个答案: