Question

我正在使用puikinsh/gentelella管理员模板启动一个新的AngularJS项目。

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

所有html已成功加载，但现在无法点击侧边栏，并且未加载“仪表板”视图中的所有图表。除了添加angular脚本之外，我没有更改index.html中的任何脚本。

我试图在角度脚本之前放置jQuery脚本，但问题仍然存在。侧边栏工作正常，当我替换ngView＆amp;使用视图中的html代码ngInclude。

我错过了什么？

额外：

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

Getelella管理主题演示：https://colorlib.com/polygon/gentelella/index.html

Answer 1

我在index.html中找不到ng-app。您的代码中没有Angular的入口点。检查此样本Plunker。 - https://embed.plnkr.co/nVCmukG5abpi1Y4ZHkrq

Answer 2

我使用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正在使用底面：

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

我认为您还需要（＆＃39; .... custom.min.js＆＃39;）在您的js模板中，这可以与模板一起加载。

Answer 3

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

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

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

Answer 4

我设法通过首先将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');
}

然后在您的角度控制器js文件中，您需要添加一个运行方法，以监听ngInclude'$ includeContentLoaded'发射器。

在我的情况下，我正在使用ng-include作为名为menu.html的副菜单

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

'menu.html'文件名是函数中第二个参数（templateName）将使用的文件名。

然后在加载DOM后调用

init_vars（）来定义全局变量。

然后我们可以根据加载的内容调用相关的init，如下所示。

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

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

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

如果遇到不断重新加载的问题，只需添加一个全局变量，以指示脚本是否已加载。

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

4 个答案: