1

使用 AngularJS 和 svg-pan-zoom，我使用<object>如下方式显示外部 svg：

<object ng-show="currentCartography" id="svgElement" type="image/svg+xml" data="{{currentCartography}}.svg">
It seems your browser doesn't support SVG.
</object>

问题是当我使用这样的函数更改我的 svg 时：

<a href="#" onclick="changeSVG('tiger')">Tiger</a><br />
<a href="#" onclick="changeSVG('Tux')">Tux</a><br />

仅更新范围变量。我必须在链接上单击两次才能更新datahtml <object>。

这是changeSVG(fileName)功能：

在我的控制器之外：

// Out of the controller
function    changeSVG(fileName) {
   var scope = angular.element(document.getElementById("svgElement")).scope();

   scope.$apply(function() {
       scope.changeSVG(fileName);
   })
}

在我的控制器中：

// Inside controller
$scope.changeSVG = function (fileName) {
    console.log("HTML Object data before : " + document.getElementById("svgElement").getAttribute("data"));
    console.log("Scope currentCartography before : " + $scope.currentCartography + "\n--");
    $scope.currentCartography = fileName;
    window.panZoom.destroy();
    svgPanZoom('#svgElement').destroy();
    window.panZoom = svgPanZoom('#svgElement', {
        zoomEnabled: true,
        controlIconsEnabled: true,
        fit: true,
        center: true,
        minZoom: 0.75,
        maxZoom: 50,
        zoomScaleSensitivity: 0.25,
        dblClickZoomEnabled: true
    });
    console.log("HTML Object data after : " + document.getElementById("svgElement").getAttribute("data"));
    console.log("Scope currentCartography after : " + $scope.currentCartography + "\n-----");
};

我正在使用控制台检查一些值，实际上，当我调用我的函数时，范围变量会更新，但data我的 html 的属性<object>直到我第二次单击时才会更新。知道发生了什么吗？我希望一键更新我的html，而不是两次。

这是一个实时示例，单击左侧的菜单以更改 SVG 并查看行为： http ://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview （这可能不适用于 IE）

4

0 回答 0