0

ツールチップに問題があります。私はこのようなものを持っています

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

そしてjsファイルで

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

そのため、エスケープ文字があり、対処方法がわかりません。明らかに、「div」などを使用せずに、ツールチップに適切なコードを表示したいと思います。

どうすれば対処できますか？以前は tooltip-html-unsafe を使用できることは知っていましたが、現在は非推奨です。

4

3 に答える 3

0

$sce サービスを使用して HTML を安全なものとして解析し、 ui-bootstrap docsuib-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>');
    }
});
于 2018-06-07T15:09:10.657 に答える
0

これがあなたの望むものかどうかはわかりませんが、

HTML を解析/コンパイルするtemplate を使用してツールチップを表示できます。を使用する必要があります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>

于 2018-06-07T15:22:35.043 に答える