Sayfam ile düzgün yüklenemeyen sorun yaşıyorum. Html5 ve CSS3'te basit bir üstbilgi-altbilgi yapısı kullanıyorum.AngularJS, D3 ve JQuery aynı sayfada. D3 doğru DOM boyutlarını okuyamadı
+----------+
| HEADER |
+---+----------+---+
| BODY |
+---+----------+---+
| FOOTER |
+----------+
Ya şimdi yapıyorum, vücut alanı içindeki okuma genişliği ve yüksekliği penceresi yüklenir dinamik sonra (ve resimleri de) D3 ile svg oluşturmaktır.
Şimdi sitenizin her sayfasında içindeki kod fazlalığını önlemek için köşeli eklemek istiyorum ve bunu:
(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()];
}
};
});
})();
Direktiflerine altbilgi ve üstbilgi (< header> </başlığını>)
işlemek içinbu, svg'yi oluşturmak için kullanılan kodun bir parçasıdır (bir parçasıdır). İlgilendiğim şeyi sadece "sahadaki" ölçümleri okuyan kısmı göstereceğim. açısal kullanımı öncesinde
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();
});
ve tüm oldukça iyi gidiyordu. Şimdi kullanarak
:
angular.element(window).load(function() {
var search = new Search();
});
ben var içinde bir yanlış yüksekliğe sahip. Bu svg hala (başlık henüz oluşturulmamışsa)
Bu budur
<!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>
(basitleştirilmiş) endeksinin html çok yüksek olduğunda denir "() yeni ara" gibi görünüyor başlığın kodu: Ben resimdeki gibi bir yanlış değer hiç yüklü değil sahip köşeli ile o doğru görüntülenir
<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 olmadan.
Umarım sorum yeterince açıktır, sayfanın yüklenmesi sırasında her işlevin çağrıldığını düşündüğüm sorun.
DÜZENLEME: bazen de garip sayfa doğru (rastgele Occurency)
angularjs sürüm 1.3.16
Hangi açısal versiyonunu kullanıyorsunuz? Sadece bu soruyu soruyorum çünkü bu sabah 1.4.3'e geçtim ve –
grafikleriyle aynı sorunu yaşıyordum benim versiyonum AngularJS v1.3.16 – Gianmarco
Bu karmaşık olabileceğini biliyorum, ancak sorunu yeniden üreten bir plunker sağlayabilir Daha fazla araştırma yapabiliriz. – Okazari