1. 程式人生 > >如何為 angularjs 路由中的每個檢視指定 css

如何為 angularjs 路由中的每個檢視指定 css

1.為<head>元素建立自定義指令:

app.directive('head',['$rootScope','$compile',function($rootScope, $compile){return{
            restrict:'E',
            link:function(scope, elem){var html ='<link rel="stylesheet" ng-repeat="(routeCtrl, cssUrl) in routeStyles" ng-href="{{cssUrl}}" />';
                elem
.append($compile(html)(scope)); scope.routeStyles ={}; $rootScope.$on('$routeChangeStart',function(e,next, current){if(current && current.$$route && current.$$route.css){if(!angular.isArray(current.$$route.css)){ current.$$route
.css =[current.$$route.css];} angular.forEach(current.$$route.css,function(sheet){delete scope.routeStyles[sheet];});}if(next&&next.$$route &&next.$$route.css){if(!angular.isArray(next.$$route.css)){next.$$route.css =[next.$$route.css];} angular
.forEach(next.$$route.css,function(sheet){ scope.routeStyles[sheet]= sheet;});}});}};}]);

該指令執行以下操作:

  1. 它編譯(使用$compile)一個HTML字串,<link />scope.routeStyles物件使用ng-repeat和物件中的每個專案建立一組標籤ng-href
  2. 它將編譯的<link />元素集合附加到<head>標籤。
  3. 然後用它$rootScope來收聽'$routeChangeStart'事件。對於每個'$routeChangeStart'事件,它捕獲“當前” $$route物件(使用者即將離開的路由),並從<head>標籤中刪除其部分特定的css檔案。它還抓住“下一個” $$route物件(使用者即將去的路由),並將其部分特定的css檔案新增到<head>標籤中。
  4. ng-repeat編譯<link />標籤的一部分根據新增到scope.routeStyles物件或從物件中刪除的內容,處理所有新增和刪除頁面特定樣式表的所有內容。

注意: 這要求您的ng-app屬性在<html>元素上,而不是<body>內部的內容<html>

2.使用以下命令指定哪些樣式表屬於哪些路由$routeProvider
app.config(['$routeProvider',function($routeProvider){
    $routeProvider
        .when('/some/route/1',{
            templateUrl:'partials/partial1.html', 
            controller:'Partial1Ctrl',
            css:'css/partial1.css'}).when('/some/route/2',{
            templateUrl:'partials/partial2.html',
            controller:'Partial2Ctrl'}).when('/some/route/3',{
            templateUrl:'partials/partial3.html',
            controller:'Partial3Ctrl',
            css:['css/partial3_1.css','css/partial3_2.css']})}]);

此配置css為用於設定每個頁面的路由的物件新增一個自定義屬性。該物件被傳遞給每個'$routeChangeStart'事件.$$route。所以當聽

相關推薦

如何 angularjs 路由每個檢視指定 css

1.為<head>元素建立自定義指令: app.directive('head',['$rootScope','$compile',function($rootScope, $compile){return{ restrict:'E',

python_如何元組每個元素命名

進行 port 數據 大量 程序 問題 什麽 log python 學生信息系統: (名字,年齡,性別,郵箱地址) 為了減少存儲開支,每個學生的信息都以一個元組形式存放 如: (‘tom‘, 18,‘male‘,[em

python學習--元組每個元素命名

設置 imp 編寫代碼 python學習 位置 spa python () 返回 官方文檔:namedtuple():命名元組函數賦予元組中每個位置的含義,並允許更具可讀性的自編寫代碼。它們可以在任何使用常規元組的地方使用,並且可以通過名稱而不是位置索引來添加字段。 實例:

萬能地圖下載器如何檢視指定地點的歷年地表變化

      大家可能經常在紀錄片裡看到某地的歷史變遷,我們也可以通過在萬能地圖下載器內檢視某地的歷史變遷。 工具/原料       水經注萬能地圖下載器 方法/步驟     1.首先把地圖切

在0~N個數字,取指定個數的不重復數字,要求這些數字的和指定值,求所有結果

readline tco write span count string rgs logs index 1 using System; 2 using System.Collections.Generic; 3 using System.Linq;

Vuejs使用scoped stylev-html標籤新增CSS樣式

本文最新版本及更多技術文章請訪問我的個人技術部落格: http://blog.sbot.io 謝謝大家支援! 在Vue元件中,我們可以使用<style scoped>標籤來新增針對該元件的CSS樣式。 <template>

需求說明:從鍵盤輸入一個字串,統計字串每個字元的個數。如輸入“adbda”,結果a=2,d=2,b=1。

思路: 使用Scanner接收鍵盤輸入的字串。 使用HashMap統計每個字元的個數,其中key儲存字元,value用來記錄字元的數量。 原始碼: public static void main(String[] args) { //人性化提示資訊。 System

CSS英文和文字體分別設置不同的字體

ie9 英文 div rfi 默認字體 val 不同的 ear fire font-family的調用方法: div { font-family:Arial,‘Times N

假設二叉樹每個結點的值單個字元, 設計一個演算法將一棵以二叉鏈方式儲存的二叉樹 b 轉換成對應的順序儲存結構 a。——含具體實現工程

假設二叉樹中每個結點的值為單個字元, 設計一個演算法將一棵以二叉鏈方式儲存的二叉樹 b 轉換成對應的順序儲存結構 a。——李春葆資料結構第五版第七章,P246,第十題 思路解析: 解:設二叉樹的順序儲存結構型別為SqBTree,先將順序儲存結構a中所有元素置為‘#’(表示空結點)。將b轉

CSS-精靈圖片的使用(從一張圖片截圖指定位置圖示)

目錄 一、名詞解釋     在網頁中,我們可以看到有很多的小圖示,比如微博上的登入位置有很多這樣的小圖示。因為瀏覽器顯示網頁的所有內容都需要從我們自己的伺服器進行下載,如果將這些圖示分別存在伺服器上,那麼當需要顯示的時候將會發出很多次請求-->響應-

JavaScript如何把字串每個單詞首字母轉化大寫

  先上程式碼,再做解釋。   思路分析:    1. 首先先把字串中的單詞轉化為小寫(toLowerCase),再對其進行擷取(split),擷取依據為按照空格擷取;   2. 此時經過步驟一之後得到的東西是一個數組,數組裡邊存放的是剛剛按照空格一一分割的那幾個字元,要想運算

sqlite檢視指定資料庫表的詳細結構資訊

 可以查詢到當前資料庫中所有表的詳細結構資訊 可以查詢到當前資料庫中所有表的詳細結構資訊 select * from sqlite_master WHERE type = "table"; 可以查詢到當前資料庫中指定表的詳細結構資訊 可以查詢到當前資料庫中指定表的詳細結構資訊

oracle建立一個使用者,只能檢視指定檢視,如何授權,建立別名

1.create user A identified by password,建立使用者,使用者名稱是A,密碼是password create user  USER_JWFZ identified by JWFZ2017; 2.grant connect to A --授

python 2-2 如何元組每個元素命名, 提高程式可讀性-collections.namedtuple

解決方案: 1.使用下標 定義類似其語言的列舉型別,也就是定義一系列的數值常量 NAME,AGE,SEX,EMAIL=xrange(4) student=(‘jim’,16,’male’,’[email protected]’) print

AngularJS路由系列(2)--重新整理、檢視路由,路由事件和URL格式,獲取路由引數,路由的Resolve

本系列探尋AngularJS的路由機制,在WebStorm下開發。主要包括: 專案檔案結構 node_modules/ public/ .....app/ ..........bower_components/ ...............toast

python-2-如何元組每個元素命名,提高程式可讀性?

大量的索引值對程式的維護是不利的,因為不便於閱讀。 在c語言中,有兩種解決方法; 解決方法1: c語言中巨集定義的方式; #define NAME 0 #define AGE 1 解決

HighCharts 每個column指定不同的顏色

要求: 根據passrate, >=95%的顯示綠色, >=90%的顯示黃色, <90%的顯示紅色.先構造渲染函式:function redrawPassRateTd(pvData,pvTd){ var lvChart=$("<div style='

angularjs表示式的HTML內容,如何不轉義,直接表現html元素

預設情況下,AngularJS對會對插值指令求職表示式(模型)中的任何HTML標記都進行轉義,例如以下模型: $scope.msg = “hello,<b>world</b

Pycharm在執行過程檢視每個變數的方法(show variables)

做影象處理的人一般都用過MATLAB,好用易上手,並且裡面封裝了大量的演算法,並且MATLAB裡面有一個很貼心的功能就是你可以隨時檢視變數的值,以及變數的型別是什麼: 在進行程式碼除錯的時候,可以清楚的看到是哪些值出現了問題,但是由於MATLAB的深度學習生態環境還是沒