javascript - 当我尝试在范围内运行时，为什么 getElementsByTagName 为 null。$watch

Question

我是 angularJs 的新手。当“localid”更改时，我尝试在链接内重新运行 init() 函数，但它说

  var elm = angular.element(element[0].getSVGDocument().getElementsByTagName("path"));

为 null，即使它在页面加载时第一次工作。

TypeError: Cannot read property 'getElementsByTagName' of null

我用 google 搜索了 5 个多小时，但找不到原因。我缺少什么？

(function() {
'use strict';

angular
.module('neuroSeoulFinance')
.directive('seoulmap', seoulMap);

/** @ngInject */
function seoulMap($log) {
var directive = {
    restrict: 'E',
    template: '<object id="seoulmap" class="localMap" data="../assets/images/seoul.svg" type="image/svg+xml" width="80%"></object>',
    replace: true,
    scope: {
        localid : "="
    },
    link: function(scope, element, attrs) {

        var init = function() {
            var elm = angular.element(element[0].getSVGDocument().getElementsByTagName("path"));
            $log.log(elm);
            for(var i=0; i<elm.length; i++) {

                if(elm[i].id == scope.localid.id) {

                    elm[i].style.fill = attrs.highlight;
                }
                else {
                    elm[i].style.fill = "#e1e3e4";                        
                }
            }
        };

        scope.$watch('localid', function(newValue, oldValue) {
            if (newValue){
                init();  // <-- it doesn't work. 
            // var ealm = angular.element(element[0].getSVGDocument().getElementsByTagName("path")); 
            // ^ it also return null..

            $log.log("I see a data change!");
            }
        }, true);

        if(element[0].getSVGDocument()) {
            $log.log("init");
            init();
        } else {
            $log.log("load");
            element.on("load",init);  
        }
    }
};

return directive;
}})();

Answer 1

参见How to check if an embedded SVG document is loaded in an html page?

如果 getSVGDocument 返回 null，则意味着该元素尚未加载，因此如链接中所述，使用超时，并且由于您使用 Angular，因此使用 $timeout。