AngularJS、D3 和 JQuery 在同一页面中。 D3 无法读取正确的 DOM 尺寸
Posted
技术标签:
【中文标题】AngularJS、D3 和 JQuery 在同一页面中。 D3 无法读取正确的 DOM 尺寸【英文标题】：AngularJS, D3 and JQuery in the same page. D3 can't read the correct DOM dimensions 【发布时间】：2015-10-07 08:24:07 【问题描述】：我的页面无法正常加载。我在 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()];
;
);
)();
用指令处理页脚和页眉（）
这是（部分）用于创建 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">
© 2015 neo4<span class="palette-dark-blue">A</span><span class="palette-blue">r</span><span class="palette-orange">t</span> - All
rights reserved <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？我只是问这个，因为我今天早上切换到 1.4.3 并且在图表方面遇到了同样的问题 我的版本是AngularJS v1.3.16 我知道这可能很复杂，但如果您能提供一个能重现该问题的 plunker，我们可以进行进一步调查。 不能为此使用页面加载，请将函数放在指令中，以便在调用时元素存在 您为什么不尝试创建一个几乎可以工作的答案？该项目是开源的，所以代码都在github中 【参考方案1】：所以你在理解角度方面遇到了这个奇怪的十字路口。首先让我们谈谈 angular.element 与 jquery 元素不同。您不应该像这样从您创建的元素中进行 DOM 操作，您应该有一个带有链接功能的指令，以确保在您想要的时候在摘要周期中发生这种情况。这是一个很难理解的概念，但我认为我能找到的最好的例子来自另一个问题。
Angular.js: set element height on page load
这可以合理地展示和解释我们正在谈论的内容。
【讨论】：
我同意你关于不进行 dom 操作的观点，但 angular 文档中写道：“如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。”。所以在这种情况下，我会说 angular.element 与 jQuery 相同。 我正在奖励这个答案，即使我不打算接受它，我也找到了一些有用的东西，但还没有答案。由于我的假期（ :D ），我将能够在一周内专注于这个论点。我正在考虑将来开始新的赏金活动 感谢您的赏金，很高兴我能提供一些帮助。【参考方案2】：查看它是否与页面初始化有关的一个简单技巧是将测量代码包装在setTimeout 调用中并将其延迟 500 毫秒。如果这修复了测量结果，您必须搜索放置测量代码的实际正确位置:-)
【讨论】：
以上是关于AngularJS、D3 和 JQuery 在同一页面中。 D3 无法读取正确的 DOM 尺寸的主要内容，如果未能解决你的问题，请参考以下文章
未捕获的类型错误：无法读取 AngularJS 和 D3 中未定义的属性“弧”
使用 AngularJs 和 D3.js 从 svg 元素调用自定义函数