Uib-подсказка с html небезопасной - PullRequest
Новая
       37

Uib-подсказка с html небезопасной

0 голосов
/ 07 июня 2018

У меня проблема с подсказкой.У меня есть что-то вроде 

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

и в файле js 

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

Так что у меня есть escape-символы, и я не знаю, как с этим справиться.Очевидно, что я хотел бы отобразить в моей подсказке правильный код, без "div" и т. Д.

Как с этим справиться?Я знаю, что раньше мы могли использовать tooltip-html-unsafe, но сейчас это устарело.

Ответы [ 3 ]

0 голосов
/ 07 июня 2018

Я не уверен, что это то, что вам нужно, но

У вас может быть всплывающая подсказка с шаблоном , которая будет анализировать / компилировать ваш 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 голосов
/ 30 апреля 2019

Простая установка ngSanitize и включение его в ваше приложение позволит вам использовать uib-tooltip-html (а не uib-tooltip), не беспокоясь о безопасности.

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

Послеустановив его, вы можете включить его в свое приложение: 

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

И, конечно же, убедитесь, что вы включили плагин в свои файлы сборки.Лично это позволило мне очень легко заменить многие старые небезопасные всплывающие подсказки во время обновлений с предыдущих версий.

0 голосов
/ 07 июня 2018

Разбор HTML как безопасного с использованием службы $ sce и использование uib-tooltip-html, как указано в ui-bootstrap документах .

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