Custom Angular Directive Element Causing Page Load Issues

I’ve created a custom Angular directive, as an element to a page, but when the page loads it loads and renders in everything up to and including the custom directive (which is a piece of navigation) and doesn’t render anything else on the page. There are no JavaScript errors in the console either. Any suggestions?

Given more context to work with there may be one or more forthcoming. Please post the code and a link to the exercise.

Here is my directive and page template as well.

var mainApp = angular.module('mainApp', []); 
mainApp.directive('flyoutNav', function(){ 
return { 
restrict: 'E', 
replace: false, 
templateUrl: '/render/file.act?path=/assets/templates/flyout-nav-template.html', 
scope: {} 

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1.0, shrink-to-fit=no" name="viewport"/><!-- title of the page -->
    <title><system-page-title/> | Rose-Hulman</title>
    <system-region name="HEAD"/>
    <system-region name="JSON FEED VARIABLE"/>
    <system-region name="SOCIAL FEED VARIABLES"/>
    <body ng-app="mainApp">
        <noscript>Javascript must be enabled for the correct page display</noscript>
        <!-- Page starts here -->
        <!-- Google Tag Manager (noscript) -->
            <iframe height="0" src="" style="display:none;visibility:hidden" width="0"></iframe>
        <!-- End Google Tag Manager (noscript) -->
        <div class="page page-wide-tier">
            <a class="skip hide-for-screen-reader" href="#main">Skip to content</a>

            <!-- Header of the page -->
            <system-region name="HEADER"/>

            <!-- Main navigation -->
            <!-- Main Navigation of the site -->
            <nav class="nav">
                <button class="nav-button nav-top-button">
                    <span class="icon-cross">
                        <span class="hide-for-screen-reader">toggle menu</span>
                <div class="nav-holder">
                    <div class="nav-frame">
                        <div class="nav-block">
                            <div class="nav-primary-block">
                                <strong class="nav-title nav-home">
                                    <a href="/index">Home</a>
                                <system-region name="NAVIGATION"/>
                        <system-region name="SECONDARY-NAVIGATION"/>
                        <div class="nav-close-btn-holder">
                            <button class="nav-button nav-close-btn">
                                <span class="icon icon-cross">
                                    <span class="hide-for-screen-reader">Open</span>
                                </span> Close menu</button>
            <div class="nav-overlay"> </div>
            <system-region name="TIER-PAGE-HEADER"/>

            <!-- Main area of the page -->
            <main class="main" id="main">
                <!-- "Content side" area -->
                <div class="content-side">
                    <system-region name="DEFAULT"/>               

            <!-- Footer of the page -->
            <system-region name="FOOTER"/>
        <!--#protect <a href="javascript:" id="return-to-top"><span class="icon-arrow-up2"></span></a> #protect-->
        <script src="/assets/scripts/libs/angular/angular.min.js" type="text/javascript"></script>
         <script src="/assets/flyout-nav.js" type="text/javascript"></script>
1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.