个人中心
gpt4 book ai didi

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

转载 作者：数据小太阳 更新时间：2023-10-29 03:56:27 24 4
gpt4 key购买 nike

我的页面无法正确加载，这让我很苦恼。我在 html5 和 CSS3 中使用简单的页眉-主体-页脚结构。

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

我现在正在做的是在 body 空间内创建一个带有 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()];
            }
        };
    });

})();

使用指令 (< header> </header>) 处理页脚和页眉

这是用于创建 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();
});

我在 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 它呈现正确，有 Angular 我有一个错误的值，就像图像根本没有加载一样。

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

编辑:奇怪的是，有时页面加载正确(随机发生)

AngularJS 版本 1.3.16

最佳答案

所以你在理解 Angular 时遇到了这个奇怪的十字路口。首先让我们谈谈 angular.element 与 jquery 元素不同。你不应该从你创建的元素中进行 DOM 操作，你应该有一个带有链接函数的指令来确保这在你想要的时候发生在摘要循环中。这是一个很难理解的概念，但我认为我能找到的最好的例子来自另一个问题。

Angular.js: set element height on page load

这很好地展示和解释了我们正在谈论的内容。

关于javascript - 同一页面中的 AngularJS、D3 和 JQuery。 D3 无法读取正确的 DOM 维度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31478792/

24 4 0
文章推荐： javascript - 另一个网站/跨域上的元素的Xpath
文章推荐： c# - Visual Studio 等效于 java System.out
文章推荐： c# - IEnumerable 和顺序
文章推荐： C# Switch-case 字符串开头
数据小太阳
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com