i struggling page can't load properly. using simple header-body-footer structure in html5 , css3.
+----------+ | header | +---+----------+---+ | body | +---+----------+---+ | footer | +----------+ what doing right create svg d3 inside body space, reading width , height dynamically after window loaded (and pictures also).
now want add angular avoid code redundancy inside each page of site , did this:
(function() { var app = angular.module('neo4art', []); var pages = { "genesis.html": "the genesis of project", "about.html": "about us", "team.html": "the team", "index.html": "traversing art through 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()]; } }; }); })(); to handle footer , header directives (< header>< /header>)
this (part of) code used create svg. show interested in, part read "on-field" measurements.
function search(){ var width = $(".container-svg").width(); var height = $(".container-svg").height(); console.log("width:" + width + " - height:"+ height); } before use of angular using in:
$(window).load(function(d) { var search = new search(); }); and going pretty well.
now using:
angular.element(window).load(function() { var search = new search(); }); i have wrong height inside var. seems "new search()" called when svg still high (the header not yet rendered)
this html of index (simplified)
<!doctype html> <html lang="it-it" ng-app="neo4art" ng-controller="maincontroller 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> - 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> this code of header:
<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 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> without angularjs rendered correct, angular have wrong value image not loaded @ all.
i hope question clear enough, problem think in when each function called during load of page.
edit: it's strange page loaded correctly (random occurency)
angularjs version 1.3.16
so having weird cross road in understanding of angular. first lets talk angular.element not same jquery element. shouldn't doing dom manipulation element create should have directive link function make sure happening in digest cycle when want to. hard concept think best example can find other question.
angular.js: set element height on page load
this reasonable job of showing , explaining talking about.
Comments
Post a Comment