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

考虑类型为“svg”的指令，该指令使用模板在现有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已更新？

监听元素上的内容暂时解决了这一问题，但该事件已被弃用。解决这个问题的正确方法是使用接口