我通过首先将 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
});
如果您遇到不断重新加载的问题,只需添加一个全局变量来指示脚本是否已加载。