Javascript 作用域为时未更新HTML对象数据

使用AngularJS和svg平移缩放，我使用如下方式显示外部svg：

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

在我的控制器中：

// 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-----");
};

我正在使用控制台检查一些值，事实上，当我调用函数时，scope变量会被更新，但是直到我再次单击时，html的data属性才被更新。 知道发生了什么吗？ 我希望我的html在一次点击中更新，而不是两次

这是一个实时示例，单击左侧的菜单以更改SVG并查看其行为：

---

这在IE上可能不起作用

你的plunkr对我来说很好。。我只需要点击一次链接就可以改变图像了是的，但是你失去了缩放和平移功能。再看看控制台，缩放效果很好——通过鼠标滚动以及“加号”和“减号”按钮。在控制台中，我确实看到了一个异常：ReferenceError:openSearch未定义，但只有当我单击Search的放大镜时才会发生这种情况哦，我现在看到了。。单击仅加载图像，而不加载工具层。是的，在控制台上，我们可以看到，单击一次后，范围变量发生了更改，但对象的数据保持不变，直到我们再次单击。

// 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-----");
};