Sono in difficoltà con la mia pagina che non può essere caricata correttamente. Sto usando una semplice struttura header-body-footer in html5 e CSS3.AngularJS, D3 e JQuery nella stessa pagina. D3 non può leggere le dimensioni DOM corrette
+----------+
| HEADER |
+---+----------+---+
| BODY |
+---+----------+---+
| FOOTER |
+----------+
Quello che sto facendo in questo momento è creare uno svg con D3 all'interno dello spazio del corpo, la larghezza e l'altezza in modo dinamico la lettura dopo finestra viene caricato (e le immagini anche).
Ora voglio aggiungere angolare per evitare codice di ridondanza all'interno di ogni pagina del sito e ho fatto questo:
(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()];
}
};
});
})();
Per gestire piè di pagina e intestazione con le direttive (< header> </header>)
questo è (parte di) il codice utilizzato per creare lo svg. Ti mostrerò solo ciò che mi interessa, la parte che legge le misure "sul campo".
function Search(){
var width = $(".container-svg").width();
var height = $(".container-svg").height();
console.log("width:" + width + " - height:"+ height);
}
Prima che l'uso di angolare stavo usando questo:
$(window).load(function(d) {
var search = new Search();
});
e tutto stava andando abbastanza bene.
ora utilizzando:
angular.element(window).load(function() {
var search = new Search();
});
Ho un'altezza sbagliata all'interno della var. Sembra che la "Nuova ricerca()" viene chiamato quando la svg è ancora troppo alto (l'intestazione non è ancora resa)
Questo è il codice html dell'indice (semplificato)
<!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>
Questo è il codice dell'intestazione:
<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>
senza angularjs è resi corretto, con angolare ho un valore errato come l'immagine non viene caricata affatto.
Spero che la mia domanda sia abbastanza chiara, il problema che penso sia quando ogni funzione viene chiamata durante il caricamento della pagina.
EDIT: E 'strano anche che a volte la pagina viene caricata correttamente (occorrenza casuale)
AngularJS versione 1.3.16
Quale versione di angolare stai usando? Sto solo chiedendo questo perché sono passato alla 1.4.3 stamattina e stavo avendo lo stesso problema con i grafici –
la mia versione è AngularJS v1.3.16 – Gianmarco
So che questo può essere complesso, ma se è possibile fornire un plunker che riproduce il problema potremmo fare ulteriori indagini. – Okazari