Bootstrap SB Admin 2 整合 AngularJS 遇到 metisMenu 問題

使用 Bootstrap SB Admin 2 (Live Preview) 樣版 ，
整合 AngularJS 遇到了幾個關於 metisMenu  (Live Demo) 的問題，

第一個問題是如果 menu 在 ng-include 裡面的話，
並不會正常運作，而是處於完全展開的情況。
原因是原本在 sb-admin-2.js 的程式碼：

$(function() {
    $('#side-menu').metisMenu();
});

在第一次載入頁面時已執行完畢，
當 angular app 載入 ng-include 之後，並沒有做任何的動作。
解決辦法就是在 ng-include 加入 onload 函式，
在 controller 加入下列程式碼後解決：

$scope.loaded = function() {
    $('#side-menu').metisMenu();
}

完整的 Plunker 範例



第二個問題是 metisMenu 的 active 功能沒有正常運作，
原因一樣是因為原本的設計是頁面載入完成後執行程式碼：

var url = window.location;
var element = $('ul.nav a').filter(function() {
    return this.href == url;
}).addClass('active').parent().parent().addClass('in').parent();
 if (element.is('li')) {
    element.addClass('active');
}

然而使用 Angular 實作 Single Page Application 之後，
切換頁面並不會重新載入 js，所以沒有觸發這個動作。
解決辦法是當頁面改變後執行這個動作，如下列程式碼：

.run(['$rootScope', function ($rootScope) {
    $rootScope.$on('$viewContentLoaded', function (event) {
        $('ul.nav a').removeClass('active');

        var url = window.location;
        var element = $('ul.nav a').filter(function () {
            return this.href == url || url.href.indexOf(this.href) == 0;
        }).addClass('active').parent().parent().addClass('in').parent();

        if (element.is('li')) {
            element.addClass('active');
        }
    });
}]);



jquery metisMenu not working inside ng-include
http://stackoverflow.com/questions/26335696/jquery-metismenu-not-working-inside-ng-include

Finished Loading of ng-include in angular js
http://stackoverflow.com/questions/27576643/finished-loading-of-ng-include-in-angular-js

bootstrap glyphicons-halflings-regular.woff 404 not found IIS

bootstrap glyphicons-halflings-regular.woff 404 not found IIS

網站發現一行錯誤訊息：
glyphicons-halflings-regular.woff 404 not found

檢查後發現，檔案確實存在，剩下的可能性就是 woff 副檔名 IIS 不認識，
要讓 IIS 認識相關檔案的話，可以在 web.config 加入下列設定

  <system.webServer>
    <staticContent>
      <remove fileExtension=".eot" />
      <remove fileExtension=".ttf" />
      <remove fileExtension=".otf"/>
      <remove fileExtension=".woff"/>
      <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
      <mimeMap fileExtension=".ttf" mimeType="font/ttf" />
      <mimeMap fileExtension=".otf" mimeType="font/otf" />
      <mimeMap fileExtension=".woff" mimeType="application/font-woff" />
    </staticContent>
  </system.webServer>

資料來源：
Twitter bootstrap glyphicons do not appear in release mode 404
http://stackoverflow.com/questions/21269884/twitter-bootstrap-glyphicons-do-not-appear-in-release-mode-404

IIS - RESOURCE INTERPRETED AS FONT BUT TRANSFERRED WITH MIME TYPE APPLICATION/X-FONT-WOFF
http://deanhume.com/home/blogpost/iis---resource-interpreted-as-font-but-transferred-with-mime-type-application-x-font-woff/4101