Javascript ngInclude未从index.html-AngularJS加载脚本

我正在使用管理模板启动一个新的AngularJS项目

我将index.html中的内容部分提取到“dashboard”视图中，并将其替换为ngView。我使用ngInclude将侧栏部分提取到“侧栏”视图中

已成功加载所有html，但现在无法单击侧栏，并且“dashboard”视图中的所有图表也未加载。除了添加角度脚本外，我没有更改index.html中的任何脚本

我试图将jQuery脚本放在angular脚本之前，但问题仍然存在。当我用视图中的html代码替换ngView&ngInclude时，侧边栏工作正常，图表也会加载

我错过了什么

额外：

我的代码：plnkr.co/edit/gOlvOgzvNBcu9cMHBzfd

---

Getelella管理主题演示：

我在你的index.html中找不到

ng应用程序。代码中没有Angular的入口点。检查这个样品
 我在你的index.html中没有找到
ng应用程序。代码中没有Angular的入口点。检查这个样品
 我使用vue.js的完整渲染功能来编码，也遇到了这种情况

我发现原因是

<!-- 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>



现在我颠倒他们的顺序，侧边栏的js正在与底面一起工作：



我认为您的js模板中还需要（“..custom.min.js”），这可以与模板一起加载

我使用vue.js的完整渲染功能来编写代码，也遇到了这种情况

我发现原因是

<!-- 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>



现在我颠倒他们的顺序，侧边栏的js正在与底面一起工作：



我认为您的js模板中还需要（“..custom.min.js”），这可以与模板一起加载

请从html标记中删除ng app指令，并将其放在body标记上。
您可以看到输出

预览plunker在这里：
[举例][1]

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

请从html标记中删除ng app指令，并将其放在body标记上。
您可以看到输出

预览plunker在这里：
[举例][1]

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

我首先将custom.js中的初始变量声明移动到一个函数中，从而使它能够工作

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');
}

然后，在angular controller js文件中，您需要添加一个run方法，用于侦听ngInclude“$includeContentLoaded”发射器

在我的例子中，我使用一个ng include作为名为menu.html的侧菜单

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

您必须禁用custom.js中的调用，该调用在加载初始化所有内容的DOM后触发。
因此，下面的代码应该在custom.js文件中注释掉

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

如果在常量重新加载时遇到问题，只需添加一个全局变量来指示脚本是否已加载。
我首先将custom.js中的初始变量声明移动到函数中，从而使其正常工作

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');
}

然后，在angular controller js文件中，您需要添加一个run方法，用于侦听ngInclude“$includeContentLoaded”发射器

在我的例子中，我使用一个ng include作为名为menu.html的侧菜单

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

您必须禁用custom.js中的调用，该调用在加载初始化所有内容的DOM后触发。
因此，下面的代码应该在custom.js文件中注释掉

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

如果在不断重新加载时遇到问题，只需添加一个全局变量，指示脚本是否已加载。
请添加您的code@mvermand我添加了plunker链接来演示我的代码。我认为您需要将plunker剥离到问题的本质。@mver问题是我转换模板后脚本无法工作进入角度项目。请添加您的code@mvermand我添加了plunker链接来演示我的代码。我认为您需要将plunker剥离到问题的本质。@mver问题是在我将模板转换为Angular project后脚本无法工作。ng应用程序在标记中。ng应用程序在标记中。我已经放置了
custom.min.js
index.htmlIs底部的文件现在控制台上有js错误输出吗？或者说并没有错误，但JS并没有生效？控制台中并没有错误。是的，JS没有生效。我已经在index.htmlIs的底部放置了
custom.min.JS
文件。现在控制台上有JS错误输出吗？或者说并没有错误，但JS并没有生效？控制台中并没有错误。是的，JS不生效。有什么不同？侧边栏仍然不起作用。我认为您没有完全检查它。请检查我上面的链接，它的工作完美。我想你是把它看成是在垃圾桶里。通过拖动输出屏幕使其变大，您可以看到侧边栏工作正常。这一点您是对的，无论我们是否放置ng应用程序，您也可以将其放置在HTML标记上。谢谢有什么不同？侧边栏仍然不起作用。我认为您没有完全检查它。请检查我上面的链接，它的工作完美。我想你是把它看成是在垃圾桶里。通过拖动输出屏幕使其变大，您可以看到侧边栏工作正常。这一点您是对的，无论我们是否放置ng应用程序，您也可以将其放置在HTML标记上。谢谢