html 不安全的 Uib 工具提示

Question

我的工具提示有问题。我有这样的东西

<span uib-tooltip="{{displayName()}}"></span>

并在 js 文件中

function displayName() {
return '<div>' + 
     name +
    'div' +
    '<b>something</b>'
}

所以我有转义字符，不知道怎么处理。显然，我想在我的工具提示中正确显示代码，而不 "div" 等等

我该如何处理？我知道早些时候我们可以使用 tooltip-html-unsafe，但现在已经弃用了。

Answer 1

使用 $sce service and use uib-tooltip-html as specified in the ui-bootstrap docs.

将 HTML 解析为安全

在HTML中：

<span uib-tooltip-html="displayName()"></span>

在控制器中：

app.controller("AppCtrl", function ($scope, $sce) {
    $scope.displayName = function () {
        return $sce.parseAsHtml('<div>' + name + '</div><b>something</b>');
    }
});

Answer 2

我不确定这是不是你想要的，但是

您可以使用带有模板的工具提示，它将为您解析/编译您的HTML。您需要使用 uib-tooltip-template。这是一个演示：

var app = angular.module('myApp', ["ui.bootstrap"]); app.controller('myCtrl', function($scope) { $scope.name = "'Any name'"; });

<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <body> <div ng-app="myApp" ng-controller="myCtrl"> <span uib-tooltip-template="'tooltipTemplate.html'" tooltip-placement="bottom">Tooltip with a template</span>  <script type="text/ng-template" id="tooltipTemplate.html"> <div> {{name}} </div> <b>something else</b> </script> </div> </body> </html>

Answer 3

只需安装 ngSanitize 并将其包含在您的应用程序中，您就可以使用 uib-tooltip-html（而不是 uib-tooltip）而不必担心安全问题。

https://docs.angularjs.org/api/ngSanitize

安装后，您可以将其包含在您的应用中：

var app = angular.module('myApp', [...,'ngSanitize']);

当然，请确保将插件包含在构建文件中。就个人而言，这让我在从以前的版本升级过程中很容易地替换了很多旧的不安全的工具提示。

html 不安全的 Uib 工具提示

Uib-tooltip with html unsafe

tooltip

angularjs

uib