Uib-tooltip,html不安全

问题描述 投票:0回答:3

我的工具提示有问题。我有类似的东西

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

并在js文件中

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

所以我有逃脱角色,我不知道如何处理它。显然,我想在我的工具提示中正确显示代码,而不是“div”等。

我怎么处理它?我知道早些时候我们可以使用tooltip-html-unsafe,但现在已经弃用了。

angularjs tooltip uib
3个回答
0
投票

使用$sce service将HTML解析为安全,并使用uib-tooltip-html中指定的ui-bootstrap docs

在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>');
    }
});

0
投票

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

您可以使用带有模板的工具提示,该模板将为您解析/编译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>

    <!-- separate file -->
    <script type="text/ng-template" id="tooltipTemplate.html">
      <div>
        {{name}}
      </div>
      <b>something else</b>
    </script>

  </div>
</body>
</html>

0
投票

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

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

安装后,您可以将其包含在您的应用中:

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

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

© www.soinside.com 2019 - 2024. All rights reserved.