Javascript 为什么我尝试在作用域中运行时getElementsByTagName为null。$watch

我是angularJs的新手。当“localid”被更改时，我试图在链接中重新运行init（）函数，但它说

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

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

TypeError:无法读取null的属性“getElementsByTagName”

我在谷歌上搜索了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;
}})();

（函数（）{
"严格使用",；
有棱角的
.module（'neuroSeoulFinance'）
.指令（“seoulmap”，seoulmap）；
/**@ngInject*/
函数seoulMap（$log）{
var指令={
限制：'E'，
模板：“”，
替换：正确，
范围：{
本地化：=”
},
链接：函数（范围、元素、属性）{
var init=函数（）{
var elm=angular.element（元素[0].getSVGDocument（）.getElementsByTagName（“路径”）；
$log.log（elm）；
对于（var i=0；i参见

如果getSVGDocument返回null，则表示元素尚未加载，因此如链接中所述，使用超时，并且由于使用angular，因此使用$timeout。
请参阅

如果getSVGDocument返回null，则表示元素尚未加载，如链接中所述，请使用超时，由于使用angular，请使用$timeout。
在元素.on（“加载”）完成后，我更改了$watch代码。
谢谢你的宝贵意见

        if(element[0].getSVGDocument()) {
            init();
        } else {
            element.on("load",function(){   
                scope.$watch('localid', function(newValue, oldValue) {
                if (newValue){
                    init();
                }
                });
            });
        }

在元素.on（“load”）完成后，我更改了$watch代码。
谢谢你的宝贵意见

        if(element[0].getSVGDocument()) {
            init();
        } else {
            element.on("load",function(){   
                scope.$watch('localid', function(newValue, oldValue) {
                if (newValue){
                    init();
                }
                });
            });
        }

您没有正确读取错误消息。
getElementsByTagName
不为null。
getSVGDocument（）
返回null。@Epsarello那么，如何从作用域内部访问elm inside init（）。$watch（）您没有正确读取错误消息。
getElementsByTagName
不为null。
getSVGDocument（）
返回null。@那么，我如何从作用域内部访问elm inside init（）。$watch（）只在$watch（）内部调用init（）时返回null，而在加载页面时，由于“element.on”（“load”，init）的缘故，它才返回null；”。我的问题是为什么它不在$watch中。我的猜测是，因为您正在查看绑定到父作用域的数据，绑定发生在dom完全加载之前，然后$watch发生在getSVGElement可用之前。只需通过一个（如果getSVGElement（）==null）来保护您的init方法即可return；感谢您的评论。问题是，在所有页面完全加载后，用户通过手动进行本地化更改。（当svg文件已经存在时。它需要运行init（）每次用户选择不同的localid时函数。我没有说相反的话，我只是说当在呈现指令之前加载指令时，它会在指令和当前视图的控制器之间绑定值。因此$watch会用一个新值触发。这就是为什么会发生这种情况。只需像我说的那样保护您的init方法。您可以在$watch中尝试if（newValue&&oldValue），但我不确定localid的值是否可以为Null，这会给您带来麻烦。它只在$watch内部调用Init（）时返回Null，而在加载页面时，由于“element.on”（“load”，Init）的缘故，它会工作；”。我的问题是为什么它不在$watch中。我的猜测是，因为您正在查看绑定到父作用域的数据，绑定发生在dom完全加载之前，然后$watch发生在getSVGElement可用之前。只需通过一个（如果getSVGElement（）==null）来保护您的init方法即可return；感谢您的评论。问题是，在所有页面完全加载后，用户通过手动进行本地化更改。（当svg文件已经存在时。它需要运行init（）每次用户选择不同的localid时函数。我没有说相反的话，我只是说当在呈现指令之前加载指令时，它会在指令和当前视图的控制器之间绑定值。因此$watch会用一个新值触发。这就是为什么会发生这种情况。只需像我说的那样保护您的init方法。您可以在$watch中尝试if（newValue&&oldValue），但我不确定，如果localid值可以为null，您将遇到问题