ngInclude 不从 index.html 加载脚本 - AngularJS

Question

I'm starting a new AngularJS project using puikinsh/gentelella admin template.

I extract the content section from index.html into 'dashboard' view and replace it with ngView. I extract the sidebar section into 'sidebar' view using ngInclude.

All the html successfully loaded but now the sidebar can't be clicked and also all the charts in 'dashboard' view is not loaded. I didn't change any script in the index.html except adding the angular script.

I tried to place the jQuery script before angular script, but still the issue persist. The sidebar works fine and the charts loads too when I replace back the ngView & ngInclude with the html code from the view.

What am I missing?

Extra:

My code: plnkr.co/edit/gOlvOgzvNBcu9cMHBzfd

Getelella Admin Theme Demo: https://colorlib.com/polygon/gentelella/index.html

Answer 1

I didn't find an ng-app in your index.html. There is no entry point for Angular in your code. Check this sample Plunker. - https://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 2

I use vue.js's full rendering capability to code, also run into the case;

I found that the reason is

<!-- Custom Theme Scripts -->
<script src="assets/theme/admin/gentelella/build/js/custom.min.js"></script>
<!--  vue.js components compiled file -->
<script src="{{ asset('js/app.js') }}"></script>

now I reverse their order，the sidebar's js is working with underside:

<!--  vue.js components compiled file -->
<script src="{{ asset('js/app.js') }}"></script>
<!-- Custom Theme Scripts -->
<script src="assets/theme/admin/gentelella/build/js/custom.min.js"></script>

I think that you also require('....custom.min.js') in your js template, this can be load together with the template.

Answer 3

please remove the ng-app directive from html tag and place it on body tag. you can see the output.

preview plunker is here: [example plunker][1]

[1]: http://plnkr.co/edit/smCHpD3QK0zmfxkUT3CM?p=preview

Answer 4

I Managed to get it working by firstly moving the initial variable declarations in custom.js to a function.

var CURRENT_URL = '',
    $BODY = '',
    $MENU_TOGGLE = '',
    $SIDEBAR_MENU = '',
    $SIDEBAR_FOOTER = '',
    $LEFT_COL = '',
    $RIGHT_COL = '',
    $NAV_MENU = '',
    $FOOTER = '';

function init_vars() {
    CURRENT_URL = window.location.href.split('#')[0].split('?')[0];
    $BODY = $('body');
    $MENU_TOGGLE = $('#menu_toggle');
    $SIDEBAR_MENU = $('#sidebar-menu');
    $SIDEBAR_FOOTER = $('.sidebar-footer');
    $LEFT_COL = $('.left_col');
    $RIGHT_COL = $('.right_col');
    $NAV_MENU = $('.nav_menu');
    $FOOTER = $('footer');
}

then inside your angular controller js file you need to add a run method that listens to the ngInclude '$includeContentLoaded' emitter.

in my case i am using an ng-include for the side-menu called menu.html

<div ng-include="'menu.html'" id="sidebar-menu" class="main_menu_side hidden-print main_menu"></div>

The 'menu.html' filename is what the second parameter (templateName) in the function will pick up.

init_vars() is then called to define the global variables after the DOM has been loaded.

We can then call the relevant inits based on what has been loaded as shown below.

app.run(function ($rootScope) {
    $rootScope.$on("$includeContentLoaded", function (event, templateName) {
        init_vars(); //my defined function to load global variables after dom has been loaded
        if (templateName == 'menu.html') { //checking if this ng-include is the one that has loaded
            init_sidebar();
            //... other init functions
        }
    });
});

You will have to disable the call in custom.js that is triggered after the DOM has loaded that initializes everything. So the below code should be commented out in your custom.js file.

$(document).ready(function () {
    init_sparklines();
    init_flot_chart();
    init_sidebar();
    init_wysiwyg();
    //...other inits
});

If you run into issues with constant reloading just add a global variable that indicates whether the scripts have been loaded.