Ich habe Probleme mit meiner Seite, die nicht richtig geladen werden kann. Ich verwende eine einfache Header-Body-Footer-Struktur in HTML5 und CSS3.AngularJS, D3 und JQuery auf der gleichen Seite. D3 kann die korrekten DOM-Dimensionen nicht lesen
+----------+
| HEADER |
+---+----------+---+
| BODY |
+---+----------+---+
| FOOTER |
+----------+
Was ich jetzt tue, ist ein svg mit D3 im Körper Raum zu schaffen, Lesen Breite und Höhe dynamisch nach Fenster geladen wird (und Bilder auch).
Jetzt möchte ich Winkel hinzufügen Code Redundanz innerhalb jeder Seite der Website zu vermeiden, und ich habe dies:
(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()];
}
};
});
})();
Um Kopf- und Fußzeile mit den Richtlinien (< header> </header>) Griff
Dies ist (Teil von) der Code zum Erstellen der SVG. Ich werde Ihnen nur zeigen, woran ich interessiert bin, den Teil, der die Messungen vor Ort liest.
function Search(){
var width = $(".container-svg").width();
var height = $(".container-svg").height();
console.log("width:" + width + " - height:"+ height);
}
Vor dem Einsatz von Winkel war ich mit dieser in:
$(window).load(function(d) {
var search = new Search();
});
und alle ziemlich gut lief.
jetzt mit:
angular.element(window).load(function() {
var search = new Search();
});
Ich habe eine falsche Höhe innerhalb des var. Es scheint, wie die „neue Suche()“ aufgerufen wird, wenn das svg immer noch zu hoch ist (der Kopf ist noch nicht gemacht)
Dies ist der HTML-Code des Index (vereinfacht)
<!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>
Dies ist der Code des Headers:
<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>
Ohne AngularJS es richtig gemacht wird, mit Winkel ich ein falscher Wert wie das Bild haben, ist überhaupt nicht geladen.
Ich hoffe, meine Frage ist klar genug, das Problem, das ich denke, ist, wenn jede Funktion während des Ladens der Seite aufgerufen wird.
EDIT: Es ist seltsam auch, dass manchmal die Seite korrekt (random occurency) geladen
AngularJS Version 1.3.16
Welche Version von eckigen verwenden Sie? Ich frage nur, weil ich heute Morgen zu 1.4.3 wechselte und das gleiche Problem mit den Diagrammen –
hatte, meine Version ist AngularJS v1.3.16 – Gianmarco
Ich weiß, das kann komplex sein, aber wenn Sie einen Plunker zur Verfügung stellen können, reproduzieren das Problem wir könnten weitere Untersuchungen machen. – Okazari