指令中的SVG元素何时更新？

Question

考虑类型＆＃34; svg＆＃34;的指令它使用模板在现有DOM中的SVG中呈现SVG元素：

angular.module('myapp').directive('component', ['$timeout', function($timeout){

    return {
        type: 'svg',
        restrict: 'E',
        replace: true,
        templateUrl: 'template.svg',

        link: function (scope, element) {

            var dir = angular.element(document.createElement('my-directive'));
            dir.attr('id', 'test');
            $compile( dir )( scope );
            element.append(dir);

            $timeout(function(){
                var el = document.getElementById('test');

                var bb  = el.getBoundingClientRect();

                scope.rectWidth = bb.width;
                scope.rectHeight = bb.height;
            }, 0);

        }
    };

}]);

以下是模板：

<rect width="{{rectWidth}}" height="{{rectHeight}}"></rect>

目的是在呈现DOM之后更新维度。这些维度大约有一半的时间没有更新 - 特别是在页面上有多个指令元素的情况下。我已经读过$timeout将确保在函数运行之前呈现HTML DOM。在测量附加元素的大小之前，如何确保SVG已更新？

Answer 1

在元素上侦听DOMSubtreeModified暂时解决了这个问题，但该事件已被弃用。解决此问题的正确方法是使用MutationObserver接口。