1

AngularJS と svg-pan-zoom を使用して、次のように を使用して外部 svg を表示<object>します。

<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 />

スコープ変数のみが更新されます。datahtml のも更新するには、リンクを 2 回クリックする必要があります<object>。

changeSVG(fileName)関数は次のとおりです。

私のコントローラーから：

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

コンソールを使用していくつかの値を確認しています。実際、関数を呼び出すとスコープ変数が更新されdataますが、html の属性はもう一度<object>クリックするまで更新されません。何が起こっているのですか？HTML を 2 回ではなく 1 回のクリックで更新したい。

これは実際の例です。左側のメニューをクリックして SVG を変更し、動作を確認してください: http://embed.plnkr.co/0nufcYZpE3ZzGxKQmUkf/preview (これは IE では動作しない可能性があります)

4

0 に答える 0