Question

我有一个动态生成SVG的情况。这有各种形式，但是，例如，我做这样的事情;

<rect uib-popover=\"I will show data!\" popover-append-to-body=\"true\" popover-placement=\"bottom\" popover-trigger=\"mouseenter\" id=\"component-#{SecureRandom.uuid}\" x=\"#{pos_x + (component_width / 2)}\" y=\"#{MID_LINE - (component_height / 2)}\" width=\"#{component_width}\" height=\"#{component_height}\" style=\"stroke-width:0.5; stroke:rgb(0,0,0)\" />

SVG文档被发送回浏览器并动态注入DIV（通过Angular控制器）。

问题是弹出窗口不会出现。似乎页面没有被重新扫描＆＃34;注入内容时（因此永远不会看到uib-popover）。

我做了一些测试来证实这一点。例如，在页面中直接放置SVG;

<svg>
  <circle cx="30" cy="30" r="10" uib-popover="Hello world" popover-title="Title!" popover-append-to-body="true" popover-placement="right" popover-trigger="mouseenter"/>
</svg>

显示弹出窗口。

虽然这样做但不起作用;

<div ng-bind-html="svg"></div>

svg变量在控制器内并由;

设置

$scope.svg = $sce.trustAsHtml('<svg><circle cx="30" cy="30" r="10" uib-popover="Hello world" popover-title="Title!" popover-append-to-body="true" popover-placement="right" popover-trigger="mouseenter"/></svg>')

在这种情况下，popover会出现而不是。

那我错过了什么？有没有什么方法可以将SVG动态注入页面并使Angular / Bootstrap指令有效？也许某种方式告诉指令重新绑定？

干杯，本

使用Angular Bootstrap指令＆＃34; uib-popover＆＃34;使用动态生成的SVG内容

0 个答案: