1

我正在使用puikinsh/gentelella管理模板开始​​一个新的 AngularJS 项目。

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

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

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

我错过了什么？

额外的：

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

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

4

4 回答 4

0

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

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

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

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

于 2020-11-05T09:43:18.760 回答
0

我使用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>

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

于 2017-03-01T04:18:52.287 回答
0

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

预览 plunker 在这里：[example plunker][1]

[1]: http://plnkr.co/edit/smCHpD3QK0zmfxkUT3CM?p=preview
于 2017-03-01T09:46:37.473 回答
0

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

于 2017-02-28T08:39:01.863 回答