i angular newbie , running issue whereby core script file not being seen partials reason. can see core file working correcting outside partials , views.
here setup:
index.html (app)
<!doctype html> <html ng-app="testapplication"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test!</title> <link rel="stylesheet/less" type="text/css" href="assets/stylesheets/theme/rocket_theme.less" /> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--> <!-- core theme less --> <script type="text/javascript"> less = { env: "development", loglevel: 0, async: true }; </script> </head> <body class=""> <!-- start: main --> <div id="main"> <div ng-include src="'app/views/shared/top_header.html'"></div> <div ng-view></div> </div> <!-- end: main --> <!-- jquery --> <script src="vendor/jquery/dist/jquery.min.js"></script> <script src="vendor/jquery/dist/jquery-ui.min.js"></script> <!-- theme core js --> <script src="assets/javascripts/theme/custom.js"></script> <script src="assets/javascripts/theme/utility/utility.js"></script> <script src="assets/javascripts/theme/main.js"></script> <!-- application - plugins --> <script src="vendor/underscore/underscore-min.js"></script> <script src="vendor/less/dist/less.min.js"></script> <script src="vendor/holderjs/holder.js"></script> <script src="vendor/hello/dist/hello.all.min.js"></script> <script src="vendor/chartjs/chart.min.js"></script> <!-- angular - resources --> <script src="vendor/angular/angular.min.js"></script> <script src="vendor/angular-resource/angular-resource.min.js"></script> <script src="vendor/restangular/dist/restangular.min.js"></script> <script src="vendor/angular-route/angular-route.min.js"></script> <script src="vendor/angular-chart.js/dist/angular-chart.js"></script> <script src="vendor/ng-currency/dist/ng-currency.min.js"></script> <script src="vendor/angular-animate/angular-animate.js"></script> <script src="vendor/angular-utils-pagination/dirpagination.js"></script> <!-- angular - application --> <script src="assets/javascripts/angular/app.js"></script> <script src="assets/javascripts/angular/routes/routes.js"></script> <script src="assets/javascripts/angular/services/shared-properties.js"> </script> <!-- application - controllers --> <script src="assets/javascripts/angular/controllers/topheader_ctrl.js"></script> <script type="text/javascript"> jquery(document).ready(function() { // init theme core core.init(); console.log('init'); }); </script> </body> </html> if initialize core script file within controller, works particular controller:
top header controller
app.controller('headerctrl', function($scope,$http,sharedproperties,restangular) { core.init();//works controller $scope.gotourl = function(url){ window.location.href = "#/" + url; } }); i needing able initialize core single time accessible every part of application.
main.js
'use strict'; /*! main.js - v0.1.1 * http://admindesigns.com/ * copyright (c) 2015 admin designs;*/ /* core theme functions required * of themes vital functionality */ var core = function(options) { // variables var body = $('body'); // sidemenu functions var runsidemenu = function(options) { // if sidebar fixed init custom scrollbar plugin // if ($('#sidebar_left.affix').length && !$('body').hasclass('sb-l-m')) { // $('.sidebar-left-content').scroller(); // } // sidebar state naming conventions: // "sb-l-o" - sidebar left open // "sb-l-c" - sidebar left closed // "sb-l-m" - sidebar left minified // same naming convention applies right sidebar // sidebar left toggle function var sidebarlefttoggle = function() { // check see if the user has closed entire // leftside menu. if true reopen it, result // in menu resetting minified state. // second click expand menu. if (body.hasclass('sb-l-c') && options.collapse === "sb-l-m") { body.removeclass('sb-l-c'); } // toggle sidebar state(open/close) body.toggleclass(options.collapse).removeclass('sb-r-o').addclass('sb-r-c'); triggerresize(); }; // sidebar right toggle function var sidebarrighttoggle = function() { // toggle sidebar state(open/close) if (options.siblingrope === true && !body.hasclass('mobile-view') && body.hasclass('sb-r-o')) { body.toggleclass('sb-r-o sb-r-c').toggleclass(options.collapse); } else { body.toggleclass('sb-r-o sb-r-c').addclass(options.collapse); } triggerresize(); }; // sidebar left collapse entire menu event $('.sidebar-toggle-mini').on('click', function(e) { e.preventdefault(); // close menu body.addclass('sb-l-c'); triggerresize(); // after animation has occured toggle menu. // upon menu reopening classes toggled // again, restoring menus state prior // being hidden if (!body.hasclass('mobile-view')) { settimeout(function() { body.toggleclass('sb-l-m sb-l-o'); }, 250); } }); // check window size on load // adds or removes "mobile-view" class based on window size var sbonloadcheck = function() { // check body classes indicating state of left , right sidebar. // if not found add default sidebar settings(sidebar left open, sidebar right closed). if (!$('body.sb-l-o').length && !$('body.sb-l-m').length && !$('body.sb-l-c').length) { $('body').addclass(options.sbl); } if (!$('body.sb-r-o').length && !$('body.sb-r-c').length) { $('body').addclass(options.sbr); } // if window < 1080px wide collapse both sidebars , add ".mobile-view" class if ($(window).width() < 1080) { body.removeclass('sb-r-o').addclass('mobile-view sb-l-m sb-r-c'); } }; // check window size on resize // adds or removes "mobile-view" class based on window size var sbonresize = function() { // if window < 1080px wide collapse both sidebars , add ".mobile-view" class if ($(window).width() < 1080 && !body.hasclass('mobile-view')) { body.removeclass('sb-r-o').addclass('mobile-view sb-l-m sb-r-c'); } else if ($(window).width() > 1080) { body.removeclass('mobile-view'); } else { return; } }; // css menu animations set 300ms. after time // trigger single global window resize catch 3rd // party plugins need event resize given elements var triggerresize = function() { // if sidebar fixed init custom scrollbar plugin if ($('#sidebar_left.affix').length && $('body').hasclass('sb-l-m')) { $('.sidebar-left-content').scroller('destroy'); } settimeout(function() { $(window).trigger('resize'); }, 300) }; // functions calls sbonloadcheck(); $("#toggle_sidemenu_l").click(sidebarlefttoggle); $("#toggle_sidemenu_r").click(sidebarrighttoggle); // attach debounced resize handler var rescale = function() { sbonresize(); } var lazylayout = _.debounce(rescale, 300); $(window).resize(lazylayout); // 2. left user menu toggle // find user menu item length var usermenuitems = $('.user-menu').find('a'); // toggle open user menu $('.sidebar-menu-toggle').click(function(e) { e.preventdefault(); // toggle class signal state change $('.user-menu').toggleclass('usermenu-open').slidetoggle('fast'); // if menu closed apply animation if ($('.user-menu').hasclass('usermenu-open')) { usermenuitems.addclass('animated fadein'); } }); // 3. left menu links toggle $('.sidebar-menu li a.accordion-toggle').click(function(e) { // menu item accordion class dropdown submenu. prevent default actions e.preventdefault(); // menu item accordion class dropdown submenu. prevent default actions if ($('body').hasclass('sb-l-m') && !$(this).parents('ul.sub-nav').length) { return; } // menu item accordion class dropdown submenu. prevent default actions if (!$(this).parents('ul.sub-nav').length) { $('a.accordion-toggle.menu-open').next('ul').slideup('fast', 'swing', function() { $(this).attr('style', '').prev().removeclass('menu-open'); }); } // menu item accordion class dropdown submenu. prevent default actions else { var activemenu = $(this).next('ul.sub-nav'); var siblingmenu = $(this).parent().siblings('li').children('a.accordion-toggle.menu-open').next('ul.sub-nav') activemenu.slideup('fast', 'swing', function() { $(this).attr('style', '').prev().removeclass('menu-open'); }); siblingmenu.slideup('fast', 'swing', function() { $(this).attr('style', '').prev().removeclass('menu-open'); }); } // expand targeted menu item, add ".open-menu" class // , remove left on inline jquery animation styles if (!$(this).hasclass('menu-open')) { $(this).next('ul').slidetoggle('fast', 'swing', function() { $(this).attr('style', '').prev().toggleclass('menu-open'); }); } }); } // jquery helper functions var runhelpers = function() { // disable selection $.fn.disableselection = function() { return .attr('unselectable', 'on') .css('user-select', 'none') .on('selectstart', false); }; // test ie, add body class if version 9 function msieversion() { var ua = window.navigator.useragent; var msie = ua.indexof("msie "); if (msie > 0 || !!navigator.useragent.match(/trident.*rv\:11\./)) { var ieversion = parseint(ua.substring(msie + 5, ua.indexof(".", msie))); if (ieversion === 9) {$('body').addclass('no-js ie' + ieversion);} return ieversion; } else { return false; } } msieversion(); // clean helper removes leftover // animation classes on primary content container // if left can cause z-index , visibility problems settimeout(function() { $('#content').removeclass('animated fadein'); },800); } // delayed animations var runanimations = function() { // add class after load prevent css animations // bluring pages have load intensive resources settimeout(function() { $('body').addclass('onload-check'); }, 100); // delayed animations // data attribute accepts delay(in ms) , animation style // if delay provided fadein set default // eg. data-animate='["500","fadein"]' $('.animated-delay[data-animate]').each(function() { var = $(this) var delaytime = this.data('animate'); var delayanimation = 'fadein'; // if data attribute has more 1 value // it's array, reset defaults if (delaytime.length > 1 && delaytime.length < 3) { delaytime = this.data('animate')[0]; delayanimation = this.data('animate')[1]; } var delayanimate = settimeout(function() { this.removeclass('animated-delay').addclass('animated ' + delayanimation) .one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function() { this.removeclass('animated ' + delayanimation); }); }, delaytime); }); // "in-view" animations // data attribute accepts animation style , offset(in %) // eg. data-animate='["fadein","40%"]' $('.animated-waypoint').each(function(i, e) { var = $(this); var animation = this.data('animate'); var offsetval = '35%'; // if data attribute has more 1 value // it's array, reset defaults if (animation.length > 1 && animation.length < 3) { animation = this.data('animate')[0]; offsetval = this.data('animate')[1]; } var waypoint = new waypoint({ element: this, handler: function(direction) { console.log(offsetval) if (this.hasclass('animated-waypoint')) { this.removeclass('animated-waypoint').addclass('animated ' + animation) .one('webkitanimationend mozanimationend msanimationend oanimationend animationend', function() { this.removeclass('animated ' + animation); }); } }, offset: offsetval }); }); } // header functions var runheader = function() { // searchbar - mobile modifcations $('.navbar-search').on('click', function(e) { var = $(this); var searchform = this.find('input'); var searchremove = this.find('.search-remove'); // don't unless in mobile mode if (!$('body.mobile-view').length) { return; } // open search bar , add closing icon if 1 isn't found this.addclass('search-open'); if (!searchremove.length) { this.append('<div class="search-remove"></div>'); } // fadein remove btn , focus search input on animation complete settimeout(function() { this.find('.search-remove').fadein(); searchform.focus(); searchform.one('keydown', function() { $(this).val(''); }); },330) // if remove icon clicked close search bar if ($(e.target).attr('class') == 'search-remove') { this.removeclass('search-open'); this.find('.search-remove').remove(); } }); // custom animation header content dropdown if ($('.dropdown-item-slide').length) { $('.dropdown-item-slide').on('shown.bs.dropdown', function() { var = $(this); settimeout(function() { this.addclass('slide-open'); }, 20); }); $('.dropdown-item-slide').on('hidden.bs.dropdown', function() { $(this).removeclass('slide-open'); }); } // init jquery multi-select navbar user dropdown if ($("#user-status").length) { $('#user-status').multiselect({ buttonclass: 'btn btn-default btn-sm', buttonwidth: 100, dropright: false }); } if ($("#user-role").length) { $('#user-role').multiselect({ buttonclass: 'btn btn-default btn-sm', buttonwidth: 100, dropright: true }); } // persistent tooltips. use class prevent menu // dropdown closing when clicking content inside of if ($('.dropdown-menu.dropdown-persist').length) { $('.dropdown-menu.dropdown-persist').on('click', function(e) { e.stoppropagation(); var target = $(e.target); // stopping event propagation disable multiselects working // in areas such user menu dropdown. helps correct function closemulti() { target.parents('.dropdown-persist').find('.btn-group').each(function() { if ($(this).children('.multiselect').length) { $(this).removeclass('open'); } }); }; if (target.hasclass('multiselect') || target.parent().hasclass('multiselect')) { closemulti(); target.parents('.btn-group').toggleclass('open'); } else { closemulti() } }); } // sliding topbar metro menu var menu = $('#topbar-dropmenu'); var items = menu.find('.metro-tile'); var metrobg = $('.metro-modal'); // toggle menu , active class on icon click $('.topbar-menu-toggle').on('click', function() { menu.slidetoggle(230).toggleclass('topbar-menu-open'); $(items).addclass('animated animated-short fadeindown').css('opacity', 1); // create modal hover effect if (!metrobg.length) { metrobg = $('<div class="metro-modal"></div>').appendto('body'); } settimeout(function() { metrobg.fadein(); }, 380); }); // if modal clicked close menu $('body').on('click', '.metro-modal', function() { metrobg.fadeout('fast'); settimeout(function() { menu.slidetoggle(150).toggleclass('topbar-menu-open'); }, 250); }); } // tray related functions var runtrays = function() { // match height of tray height of body var traymatch = $('.tray[data-tray-height="match"]'); if (traymatch.length) { // loop each tray , set height match body traymatch.each(function() { var height = $('body').height(); $(this).height(height); }); }; // debounced resize handler var rescale = function() { if ($(window).width() < 1000) { body.addclass('tray-rescale'); } else {body.removeclass('tray-rescale tray-rescale-left tray-rescale-right');} } var lazylayout = _.debounce(rescale, 300); if (!body.hasclass('disable-tray-rescale')) { // rescale on window resize $(window).resize(lazylayout); // rescale on load rescale(); } } // form related functions var runformelements = function() { // init jquery sortable, if present if ($(".sortable").length) { $(".sortable").sortable(); $(".sortable").disableselection(); } var tooltips = $("[data-toggle=tooltip]"); // init bootstrap tooltips, if present if (tooltips.length) { if (tooltips.parents('#sidebar_left')) { tooltips.tooltip({ container: $('body'), template: '<div class="tooltip tooltip-white" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' }); } else { tooltips.tooltip(); } } // init bootstrap popovers, if present if ($("[data-toggle=popover]").length) { $('[data-toggle=popover]').popover(); } // init bootstrap persistent tooltips. prevents // popup closing if checkbox contains clicked $('.dropdown-menu .dropdown-persist').click(function(event) { event.stoppropagation(); }); // prevents dropdown menu closing when navigation // menu contains clicked (panel/tab menus) $('.dropdown-menu .nav-tabs li a').click(function(event) { event.preventdefault(); event.stoppropagation(); $(this).tab('show') }); // if btn has ".btn-states" class monitor user clicks. on click remove // active class siblings , give button clicked. // gives button set menu feel or state if ($('.btn-states').length) { $('.btn-states').click(function() { $(this).addclass('active').siblings().removeclass('active'); }); } } return { init: function(options) { // set default options var defaults = { sbl: "sb-l-o", // sidebar left open onload sbr: "sb-r-c", // sidebar right closed onload collapse: "sb-l-m", // sidebar left collapse style siblingrope: true // setting true reopen left sidebar // when right sidebar closed }; // extend default options. var options = $.extend({}, defaults, options); // call core functions runhelpers(); runanimations(); runsidemenu(options); runtrays(); runformelements(); runheader(); } } }(); // global library of theme colors javascript plug , play use var bgprimary = '#4a89dc', bgprimaryl = '#5d9cec', bgprimarylr = '#83aee7', bgprimaryd = '#2e76d6', bgprimarydr = '#2567bd', bgsuccess = '#70ca63', bgsuccessl = '#87d37c', bgsuccesslr = '#9edc95', bgsuccessd = '#58c249', bgsuccessdr = '#49ae3b', bginfo = '#3bafda', bginfol = '#4fc1e9', bginfolr = '#74c6e5', bginfod = '#27a0cc', bginfodr = '#2189b0', bgwarning = '#f6bb42', bgwarningl = '#ffce54', bgwarninglr = '#f9d283', bgwarningd = '#f4af22', bgwarningdr = '#d9950a', bgdanger = '#e9573f', bgdangerl = '#fc6e51', bgdangerlr = '#f08c7c', bgdangerd = '#e63c21', bgdangerdr = '#cd3117', bgalert = '#967adc', bgalertl = '#ac92ec', bgalertlr = '#c0b0ea', bgalertd = '#815fd5', bgalertdr = '#6c44ce', bgsystem = '#37bc9b', bgsysteml = '#48cfad', bgsystemlr = '#65d2b7', bgsystemd = '#2fa285', bgsystemdr = '#288770', bglight = '#f3f6f7', bglightl = '#fdfefe', bglightlr = '#ffffff', bglightd = '#e9eef0', bglightdr = '#dfe6e9', bgdark = '#3b3f4f', bgdarkl = '#424759', bgdarklr = '#51566c', bgdarkd = '#2c2f3c', bgdarkdr = '#1e2028', bgblack = '#283946', bgblackl = '#2e4251', bgblacklr = '#354a5b', bgblackd = '#1c2730', bgblackdr = '#0f161b';
if doing lot of dom rewriting , attribute manipulation in core libraries not going work in either case when new view rendered. putting outside controller work first controller loaded.
you can
function somecontroller($scope) { $scope.$on('$viewcontentloaded', function(){core.init();}); } you have in each controller.
a better practice write directive.
edit: here thumb rule. if core files not touching angular views better off keeping outside otherwise have mentioned above
edit2: suggestion based on added main.js. has rules applies generic elements dropdown. suggest go angular way
Comments
Post a Comment