Javascript AngularJS、D3和JQuery在同一页面中。D3可以'；t读取正确的DOM维度

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

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

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

现在，我想添加angular以避免站点每个页面中的代码冗余，我做到了：

(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()];
            }
        };
    });

})();

使用指令处理页脚和页眉（

）

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

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

在使用angular之前，我将其用于：

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

一切都很顺利

现在使用：

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

我在变量中有一个错误的高度。当svg仍然太高时，似乎调用了“new Search（）”（标题尚未呈现）

这是索引的html（简化）

{{“neo4Art-”+mc.page[“about.html”]}
&抄袭；2015年neo4Art-所有
保留权利

这是标题的代码：

<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，我有一个错误的值，就像根本没有加载图像一样

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

编辑：有时页面加载正确（随机发生），这也很奇怪

---

AngularJS 1.3.16版

因此，您在理解AngularJS时遇到了这个奇怪的十字路口。首先让我们讨论angular.element与jquery元素不同。您不应该从您创建的元素执行DOM操作，就像您应该有一个带有链接函数的指令，以确保在您希望的摘要周期中发生这种情况一样。这是一个很难理解的概念，但我认为我能找到的最好的例子是从另一个问题

---

这在展示和解释我们正在谈论的内容方面做得很合理

查看它是否与页面初始化相关的一个简单技巧是将测量代码包装在一个调用中，并将其延迟500毫秒。如果这解决了测量问题，您必须搜索实际的正确位置来放置测量代码：-）

您使用的是什么版本的angular？我之所以问这个问题，是因为今天早上我切换到了1.4.3版本，在chartsmy version is AngularJS v1.3.16上也遇到了同样的问题。我知道这可能很复杂，但如果你能提供一个plunker来重现这个问题，我们可以做进一步的调查。不能使用pageload来解决这个问题，将函数放在一个指令中，这样元素在被调用时就存在了。为什么不尝试创建一个类似于几乎可以工作的答案呢？该项目是开源的，所以代码都在githubI中，我同意您不进行dom操作，但angular文档中写道：“如果jQuery可用，angular.element是jQuery函数的别名。”。所以在这种情况下，我会说angular.element和jQuery是一样的。我会奖励这个答案，即使我不会接受它，我发现了一些有用的东西，但还没有找到答案。由于我的假期（：D），我将能够在一周内专注于这场争论。我正在考虑在未来建立一个新的赏金银行，因为赏金很高兴我能帮上忙。

<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>