使用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 />
仅更新范围变量。我必须在链接上点击两次以更新html data的{{1}}。
以下是<object>功能：
我的控制器：
changeSVG(fileName)在我的控制器中：
// Out of the controller
function changeSVG(fileName) {
var scope = angular.element(document.getElementById("svgElement")).scope();
scope.$apply(function() {
scope.changeSVG(fileName);
})
}
我正在使用控制台检查一些值，实际上，当我调用我的函数时，范围变量会更新，但是我的html // 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-----");
};
的{{1}}属性直到我再次点击。
知道发生了什么事吗？
我希望我的html只需点击一下即可更新。
这是一个实例，点击左侧的菜单更改SVG并查看行为： http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview （这可能不适用于IE）