Custom Angular Directive Element Causing Page Load Issues

Get Help Angular.js
1

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?

2

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

3

Here is my directive and page template as well.

(function(){ 
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">
<head>
<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-page-meta-description/>
    <system-page-meta-keywords/>
    <system-region name="HEAD"/>
    <system-region name="JSON FEED VARIABLE"/>
    <system-region name="SOCIAL FEED VARIABLES"/>
    </head>
    <body ng-app="mainApp">
        <noscript>Javascript must be enabled for the correct page display</noscript>
        <!-- Page starts here -->
        
        <!-- Google Tag Manager (noscript) -->
        <noscript>
            <iframe height="0" src="https://www.googletagmanager.com/ns.html?id=GTM-WZCJP3" style="display:none;visibility:hidden" width="0"></iframe>
        </noscript>
        <!-- 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>
                    </span>
                </button>
                <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>
                                </strong>
                                <system-region name="NAVIGATION"/>
                            </div>
                        </div>
                        <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>
                    </div>
                </div>
            </nav>
            <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"/>               
                </div>
            </main>

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

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