Bonjour,

à l'aide d'angularJS et de svg-pan-zoom, j'affiche des SVG situés dans des fichiers externes dans une page html via un <object> :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<object ng-show="currentCartography" id="svgElement" type="image/svg+xml" data="{{currentCartography}}.svg">
It seems your browser doesn't support SVG.
</object>

Mon problème est que lorsque je change le SVG à afficher en utilisant une fonction comme ceci :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
<a href="#" onclick="changeSVG('tiger')">Tiger</a><br />
<a href="#" onclick="changeSVG('Tux')">Tux</a><br />

Seules les variables du scope sont mises à jour. Je dois cliquer deux fois sur le lien pour que l'attribut data de mon <object> soit mis à jour dans ma page html.

Voici ma fonction changeSVG(fileName) :

En dehors du controller :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
// Out of the controller
function    changeSVG(fileName) {
   var scope = angular.element(document.getElementById("svgElement")).scope();
 
   scope.$apply(function() {
       scope.changeSVG(fileName);
   })
}

Dans le contorller :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 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-----");
};

J'utilise la console pour vérifier certaines valeurs et en effet, les variables du scope sont mis à jour lorsque j'appelle ma fonction changeSVG(fileName) mais l'attribut data de mon <object> n'est mis àjour qu'après un second clic consécutif sur mon lien.

J'aimerai que la page html soit entièrement à jour après seulement un clic, et non deux.

Voici un exemple d'utilisation via Plunker, cliquez sur le menu à gauche pour faire apparaître le menu et pouvoir changer le SVG affiché. Le SVG est bien modifié après un clic mais pas toute l'interface et les fonctionnalités qui l'entourent.
On peut aussi voir via la console que seules les variables du scope sont mises à jour après l'appel de changeSVG(fileName).

Plunker : http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview
L'exemple n'est utilisable que en embedded view et ne fonctionne pas sous IE.

(Il faut initialiser mon objet avec des valeurs en dur au lieu d'utiliser les variables du scope angular pour que ça fonctionne sous IE, je ne vois pas comment régler ce souci.)