HTML object data not updated while scope is

问题

Using AngularJS and svg-pan-zoom, I display external svg using an <object> as follows :

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

The issue is that when I change my svg using a function like this :

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

Only the scope variable is updated. I have to click twice on the link to also update the data of the html <object>.

Here is the changeSVG(fileName) function :

Out of my controller :

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

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

And in my controller :

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

I'm using the console to check some values and indeed, the scope variable are updated when I call my function, but the data attribute of my html <object> is not until I click a second time. Any idea of what's going on ? I want my html to be updated in one click, not two.

Here is a live example, click on the menu on the left to change SVG and see the behavior : http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview (This might not work on IE)

来源：https://stackoverflow.com/questions/30051962/html-object-data-not-updated-while-scope-is

标签

javascript

html

angularjs

svg

svgpanzoom