Scope mis à jour mais pas HTML
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:
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:
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:
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:
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.)
