ngInclude 不從 index.html 加載腳本 - AngularJS

Question

我正在使用puikinsh/gentelella管理模板開始​​一個新的 AngularJS 項目。

我將 index.html 中的內容部分提取到“儀表板”視圖中，並將其替換為 ngView。 我使用 ngInclude 將側邊欄部分提取到“側邊欄”視圖中。

所有 html 均已成功加載，但現在無法單擊側邊欄，並且未加載“儀表板”視圖中的所有圖表。 除了添加 angular 腳本之外，我沒有更改 index.html 中的任何腳本。

我試圖將 jQuery 腳本放在 angular 腳本之前，但問題仍然存在。 當我用視圖中的 html 代碼替換 ngView 和 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>

我認為您的 js 模板中還需要 require('....custom.min.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' 發射器。

在我的例子中，我使用了一個名為 menu.html 的側邊菜單的 ng-include

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

'menu.html' 文件名是函數中的第二個參數 (templateName) 將選取的。

然后調用 init_vars() 在 DOM 加載后定義全局變量。

然后我們可以根據加載的內容調用相關的初始化，如下所示。

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

如果您遇到不斷重新加載的問題，只需添加一個全局變量，指示腳本是否已加載。