javascript - Rewriting scripts "the Angular way"? -
okay, have pretty basic site i'm working on i'm modifying use mean stack , i'm getting started angular. i'm using scotch.io's mean starter app base started. far, it's been pretty easy, i've got key components in templates , added them using ng-include.
html
<title>first angular page</title> <!-- css --> <link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css"> <!-- font awesome --> <link href='http://fonts.googleapis.com/css?family=quicksand:700|montserrat:700|open+sans|sniglet:400,800' rel='stylesheet' type='text/css'> <!-- google fonts --> <link rel="stylesheet" href="css/mainstyles.css"> <!-- stephie's styles --> <!-- js --> <script src="libs/angular/angular.min.js"></script> <script src="libs/angular-route/angular-route.min.js"></script> <!-- angular custom --> <script src="js/controllers/mainctrl.js"></script> <script src="js/controllers/nerdctrl.js"></script> <script src="js/services/nerdservice.js"></script> <script src="js/approutes.js"></script> <script src="js/app.js"></script> </head> <body ng-app="sampleapp" ng-controller="nerdcontroller"> <!-- navagation --> <div ng-include='"templates/navagation.html"'></div> <div id="site-canvas"> <!-- header --> <div ng-include='"templates/header.html"'></div> <div id="page-content"> <!-- angular dynamic content / unique page fragment --> <div ng-view></div> </div> <!-- #page-content --> <!-- footer --> <div ng-include='"templates/footer.html"'></div> </div><!-- #site-canvas --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="js/menu.js"></script> </body> </html> but i've got problems, menu.js file isn't working. consists pretty entirely of add/removeclass methods using jquery.
here's old code pen of site i'm working on in basic html demostrate how it's supposed work. http://codepen.io/stuffiestephie/pen/bnqjvx
function togglenav() { if ($('#drawer').hasclass('show-nav')) { $('#drawer').removeclass('show-nav'); $('#nav-icon').removeclass('open'); $("nav li.gotsmenus").removeclass("showsub"); } else { $('#drawer').addclass('show-nav'); $('#nav-icon').addclass('open'); $("nav li.gotsmenus").removeclass("showsub"); } } $('#closebutton, #site-canvas, nav li li').click(function() { $('#drawer').removeclass('show-nav'); $('#nav-icon').removeclass('open'); $("nav li.gotsmenus").removeclass("showsub"); }); but doesn't work angular templates. (or @ least, click , hover functions don't. scroll function auto hides header still works mysteriously ...? it's kinda working)
so.. begin? i'm sorry if dumb question i'm new angular , i've been spinning wheels couple of hours now. put in directive or controller or module or what? have rewrite in vanilla js? , if did, have other jquery dependencies (i have image gallery powered tumblr's json api uses jquery-dependent lightbox, among other things).
if can point me in right direction grateful ;_;
sounds race condition, when script executes, there might not #menuheader in dom. may need add code load callback using delegate. like:
$("#menuheader").on('load', function () { // put menu.js code here }); i put break point , figure out what's in dom when executes. , figure out takes load dom first, run script.
Comments
Post a Comment