Gia*_*rco 9 javascript jquery d3.js angularjs
我正在努力处理无法正常加载的页面.我在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">
© 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它被渲染得正确,有角度我有一个错误的值,就像图像根本没有加载.
我希望我的问题足够清楚,我认为在加载页面时调用每个函数时会出现问题.
编辑:有时候页面加载正确(随机出现)也很奇怪
AngularJS版本1.3.16
所以你在理解角度方面遇到了这个奇怪的十字路口。首先我们来谈谈 angular.element 与 jquery 元素不同。您不应该从您创建的元素中进行 DOM 操作，您应该有一个带有链接函数的指令，以确保在您想要的时候在摘要周期中发生这种情况。这是一个很难理解的概念，但我认为我能找到的最好的例子来自另一个问题。
这很好地展示和解释了我们正在讨论的内容。