angular擴充套件

2022-08-22 01:03:13 字數 2750 閱讀 7212

1.angular 指令

angularjs 通過被稱為 指令 的新屬性來擴充套件 html

-通過內建的指令來為應用新增功能,內建指令帶有字首 ng-

ng-init 指令初始化乙個angularjs應用程式的資料

ng-model 指令把元素值(輸入域的值)繫結到應用程式

ng-repeat 指令重複html元素集合中的每個專案 更多內建指令:

自定義指令:

除了內建的指令外, angularjs允許自定義指令

-可以使用.directive( ) 函式來新增自定義的指令

-要呼叫自定義指令,html 元素上需要新增自定義指令名

-使用駝峰法來命名乙個自定義指令,如: mydirective

但在使用它時需要以 - 分割,如:my-directive

directive 設定:

1.restrict:字串,可選,指令在dom裡面以什麼形式被宣告

取值有:e(元素),a(屬性),c(類),m(注釋),其中預設值為a

e(元素):

a(屬性):

c(類):

m(注釋):

例 restrict:『ca』表示指令在dom中可用類名和屬性形式被宣告

2。replace:布林值,預設值為false,表示是否替換原來的標籤;

3. template:字串,可選,指定一段html模板

例:template:"

"templateurl:字串,可選,指定一段html模板的路徑

例1:templateurl:'abc' abc為對應模板路徑的id

例2:templateurl:『abc.html』 abc.html為對應模板路徑

4. transclude: 表示自定義指令是否複製原始標記中的內容

一般情況下和 ng-transclude 指令一起使用

比如:template:「指令內部的內容原始標記中的內容

」 這時,原始標記中的內容會嵌入到ng-transclude這個div中

5.scope

scope:布林值或物件,描述指令與父作用域的關係;

scope:false, // 使用父作用域作為自己的作用域

scope:true, // 新建乙個作用域,該作用域繼承父作用域

scope:

controller:表示繫結指令內部使用的資料;

例: controller: ['$scope',function($scope)],

template:'}

'6.link:表示當directive被angular編譯後,執行該方法;

例: (大部分指令邏輯**編寫的地方)

link:function(scope,element,attr,controller));

}link:function(scope,element,attr,controller)

//scope:指令內部scope的引用

//element:包含指令的dom元素的引用,link方法一般通過jquery

操作例項(如果沒有載入jquery,還可以使用angularjs jqlite)

//attr:表示這個dom元素上的自定義屬性

//controller:在有巢狀指令的情況下使用。這個引數作用在於把子指令的引用提供給父指令,允許指令之間進行互動

angular 過濾器

-過濾器可用於轉換資料

-使用乙個管道符 | 新增到表示式和指令中

uppercase 過濾器將字串格式化為大寫

lowercase 過濾器將字串格式化為小寫

currency 過濾器將數字格式化為貨幣格式

orderby 過濾器根據表示式排列陣列

filter 過濾器從陣列中選擇乙個子集

自定義過濾器:

angularjs允許自定義過濾器,

通過 filter( 『filtername』 , fn )

方法定義 filtername為自定義過濾器名,fn為過濾器函式

過濾器函式返回乙個方法,方法返回乙個新陣列

Angular學習筆記 Angular生命週期

生命週期函式通俗的講就是元件建立 元件更新 元件銷毀的時候會觸發的一系列的方法。當 angular 使用建構函式新建乙個元件或指令後,就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法。當 angular 使用建構函式新建乙個元件或指令後,就會按下面的順序在特定時刻呼叫這些生命週期鉤子方法 鉤子用途...

angular貨幣過濾 angular過濾器的使用

angular中常見過濾器 我們從後台請求的資料 有時候不是我們想要的格式 比如貨幣數字從後台獲取過來就是一堆純數字 但是貨幣數字通常是 按照規則用逗號分開並且數字前面有標識當前是哪種貨幣 過濾器的概念 angularjs為我們提供的處理資料格式的方式 過濾器的作用 將資料格式化我們想要的格式 過濾...

angular貨幣過濾 Angular過濾器

內建過濾器 1 currency 貨幣處理 currency可以將數字格式轉化為貨幣的形式,如果不傳引數,預設為 1 展現的形式為 2 date 日期格式化 angular中提供的date過濾器能夠滿足一般的時間格式要求。展現形式為 年 月 日 時 分 秒 星期,它們之間的格式可以自由組合,脫離了原...