AngularJS，D3和JQuery在同一页面中。 D3无法读取正确的DOM维度_JavaScript

我正在努力处理无法正确加载的页面。 我在html5和CSS3中使用了一个简单的header-body-footer结构。

    +----------+
    |  HEADER  |
+---+----------+---+
|       BODY       |
+---+----------+---+
    |  FOOTER  |
    +----------+

我现在正在做的是在车身空间内创建一个带有D3的svg，在加载窗口后动态读取宽度和高度（还有图片）。

现在我想添加角度以避免站点的每个页面内的代码冗余，我这样做：

(function() {
    var app = angular.module('neo4art', []);

    var pages = {
            "genesis.html": "The genesis of the project",
            "about.html": "About Us",
            "team.html": "The Team",
            "index.html": "Traversing Art Through Its Connections"
    }

    app.directive("header", function() {
        return {
            restrict : 'E',
            templateUrl : 'header.html'
        };
    });
    app.directive("footer", function() {
        return {
            restrict : 'E',
            templateUrl : 'footer.html'
        };
    });

    app.controller('menuController', function($scope, $location, rememberService){
        $scope.isActive = function(route){
            return rememberService.getActualPage() === route;
        };
    });
    app.controller('MainController', function(Page){
        this.page = pages;
    });

    app.factory('rememberService', function($location) {
        return {
            getActualPage: function(){
                var arr = $location.$$absUrl.split("/");
                var pageName = arr[arr.length -1];
                return pageName;
            }
        };
    });
    app.factory('Page', function(rememberService) {
        return {
            getTitle: function(){
                return "neo4Art - "+ pages[rememberService.getActualPage()];
            }
        };
    });

})();

使用Directives处理页脚和标题（<header> </ header>）

这是用于创建svg的代码（的一部分）。 我只会向您展示我感兴趣的内容，即阅读“现场”测量的部分。

function Search(){
    var width = $(".container-svg").width();
    var height = $(".container-svg").height();
    console.log("width:" + width + " - height:"+ height);   
}

在使用角度之前我使用它：

$(window).load(function(d) {
    var search = new Search();
});

一切都很顺利。

现在使用：

angular.element(window).load(function() {
    var search = new Search();
});

我在var内部的高度错误。 当svg仍然太高（标题尚未呈现）时，似乎调用了“new Search（）”

这是索引的html（简化）

<!DOCTYPE html>
<html lang="it-IT" ng-app="neo4art" ng-controller="MainController as mc">
<head>
<meta charset="utf-8">
<script src="resources/js/jquery/jquery-2.1.3.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="resources/css/style.css" />
<link rel="stylesheet" type="text/css" media="screen" href="resources/css/style-index-new.css" />
<link rel="stylesheet" type="text/css" href="resources/css/font-awesome-4.3.0/css/font-awesome.min.css" />
<title>{{"neo4Art - " + mc.page["about.html"]}}</title>
</head>
<body>
    <script type="text/javascript" src="resources/js/angular.min.js"></script>
    <script type="text/javascript" src="resources/js/search.js"></script>
    <script type="text/javascript" src="resources/js/neo4art.js"></script>
    <div class="container-page scrollbar-macosx" when-ready="isReady()">
        <div class="content-home">
            <header></header>
            <div class="text-home">
                <svg class="container-svg">
            </svg>
            </div>
            <div class="footer">
                &copy; 2015 neo4<span class="palette-dark-blue">A</span><span class="palette-blue">r</span><span class="palette-orange">t</span> - All
                rights reserved &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="//www.iubenda.com/privacy-policy/430975" class="iubenda-white iubenda-embed"
                    title="Privacy Policy">Privacy Policy</a>
                </div>
        </div>
    </div>
</body>
</html>

这是标题的代码：

<div class="header">
                <div class="logo">
                    <a href="index.html"><img src="resources/img/neo4art-logo-big.png" /></a>
                    <div class="motto">Traversing Art through its connections</div>
                </div>
                <form method="get" action="graph.html" name="query">
                    <div class="menu">
                        <div class="search-bar-container">
                            <span class="icon"><i class="fa fa-search"></i></span><input type="search" id="search" placeholder="Search..." name="query" />
                        </div>
                        <ul>
                            <li><a href="javascript:void(0)" class="current">HOME</a></li>
                            <li><a href="about.html">ABOUT</a></li>
                            <li><a href="genesis.html">GENESIS</a></li>
                            <li><a href="team.html">TEAM</a></li>
                        </ul>
                    </div>
                </form>
            </div>

没有angularjs它被渲染得正确，有角度我有一个错误的值，就像图像根本没有加载。

我希望我的问题足够清楚，我认为在加载页面时调用每个函数时会出现问题。

编辑：有时候页面加载正确（随机出现）也很奇怪

AngularJS版本1.3.16

所以你在理解角度方面有这种奇怪的交叉路。 首先让我们谈谈angular.element与jquery元素的不同之处。 你不应该从你创建的元素中进行DOM操作，就像你应该有一个带有链接函数的指令，以确保在你想要的时候在摘要周期中发生这种情况。 这是一个难以理解的概念，但我认为我能找到的最好的例子来自另一个问题。

这样做可以合理地展示和解释我们正在谈论的内容。

查看它是否与页面初始化相关的一个简单技巧是将测量代码包装在调用中并将其延迟500ms。 如果这样可以修复测量，您必须搜索实际正确放置测量代码的位置:-)

AngularJS，D3和JQuery在同一页面中。 D3无法读取正确的DOM维度

问题描述

1楼

2楼