scope.watch未在非活动标签

Question

我正在运行一个角度应用程序。当我得到套接字消息时，我需要使用angular在svg文件中做一些动画。现在我使用的是scope.watch方法。每当在变量中进行一些更改时，它将观察运行 svg 对象。它工作正常。但问题是我运行我的代码，然后切换到另一个选项卡，等待几秒钟然后返回，动画继续在切换到另一个选项卡时的点。 scope.watch有什么问题。请给我一个解决这个问题的方法。或当我移动到另一个标签时发生了什么

我的示例代码如下：

myapp.directive('directive', function($http,$templateCache,$compile,$interval) {
    return {
        restrict: 'A',
        scope: {
            myvar:'=myvar'
        },
        link: function(scope, element, attrs) {
            scope.$watch('myvar', function(newValue, oldValue){
                element.html( '<g transform="translate(scope.myvar)"' +'>'

                    +'<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1528 684"><ellipse class="cls-car-1" cx="898.36" cy="479.67" rx="14.33" ry="20.5"/><rect class="cls-car-2" x="881.69" y="498.25" width="26.75" height="61" rx="7" ry="7"/><path class="cls-car-3" d="M917.61,466.08c4.67-4.67,14.67-15.33,14.67,5.33s5.33,65.33,0,64-24.67,7.33-24.67-3.33S917.61,466.08,917.61,466.08Z"/><path class="cls-car-3" d="M1019.61,483.42c4.67-4.67,14.67-15.33,14.67,5.33s5.33,65.33,0,64-24.67,7.33-24.67-3.33S1019.61,483.42,1019.61,483.42Z"/></svg>'
                    +'</g>');
                return $compile(element.contents())(scope);
            });
        }
    }
});