文章/答案/技术大牛

发布

问Uib- html不安全工具提示
EN

Stack Overflow用户

提问于 2018-06-07 14:38:10

回答 3查看 3.8K关注 0票数 0

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

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

在js文件中

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

所以我有转义角色，我不知道该如何处理。显然，我想要在我的工具提示正确地显示代码，没有"div“等。

我该怎么处理呢？我知道早些时候我们可以使用工具提示-html-不安全，但现在已经不再推荐了。

angularjs

tooltip

uib

回答 3

Stack Overflow用户

回答已采纳

发布于 2018-06-07 15:09:10

使用$sce服务将HTML解析为安全，并使用ui引导文档中指定的uib-tooltip-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>');
    }
});

票数 0

Stack Overflow用户

发布于 2018-06-07 15:22:35

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

您可以有一个带有模板的工具提示，它将为您解析/编译您的。您需要使用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

Stack Overflow用户

发布于 2019-04-30 17:30:05

只需安装ngSanitize并将其包含在应用程序中，就可以使用uib-tooltip-html (而不是uib-工具提示)，而不必担心安全性。

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

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

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50744002

复制

相似问题

问Uib- html不安全工具提示
EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Uib- html不安全工具提示EN

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Uib- html不安全工具提示
EN