Question

我是angularJs的新手。我正试图在＆＃39; localid＆＃39;内部重新运行链接内的init（）函数。已被改变，但它说

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

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

TypeError：无法读取属性＆＃39; getElementsByTagName＆＃39;为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，表示该元素尚未加载，因此如链接中所述使用超时，并且因为您使用了角度，请使用$ timeout。

Answer 2

我在完成element.on（＆＃34; load＆＃34;）之后更改了$ watch代码。感谢您的帮助。

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

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

2 个答案: