angular內置provider之$compileProvider詳解

一、方法概覽

1.directive(name, directiveFactory)

2.component(name, options)

3.aHrefSanitizationWhitelist([regexp]);

4.imgSrcSanitizationWhitelist([regexp]);

5.debugInfoEnabled([enabled]);

6.strictComponentBindingsEnabled([enabled]);

7.onChangesTtl(limit);

8.commentDirectivesEnabled(enabled);

9.cssClassDirectivesEnabled(enabled);

二、方法解釋

1、directive(name, directiveFactory)

使用compiler注冊一個指令

參數：

name：string，指令的名稱。

directiveFactory：function，指令構造工廠函數。

return：

返回自身，以供鏈式調用。

2、component(name, options)

使用compiler注冊一個組件，組件是一種特殊的指令，它自包含了UI，并且總是默認使用獨立作用域和restrict: 'E'。組件的定義是簡單的，options是一個包含了一系列屬性的對象，并且總是強制使用最好的實踐，例如controllerAS：$ctrl。

參數：

name：組件的名稱。

options：一個對象，包含以下可選的屬性。

controller：string|function，指令的控制器，字符串代表一個被注入到該模塊的控制器的名稱。

controllerAS：string，控制器的一個引用，默認是'$ctrl‘，如果被定義則scope上會有一個該名稱的屬性，例如scope.$ctrl，那么我們在html中就可以這樣使用控制器中的屬性，例如<div>{{$ctrl.name}}<div>

template：string|function，組件的模板，如果是函數，則函數有以下兩個參數，

$element：當前元素。

$attrs：當前元素屬性對象。

templateUrl：string|function，組件模板的路徑，如果是函數，則參數和以上template相同。

bindings：一個對象，用于元素的屬性和組件屬性之間的綁定，并且綁定的值總是綁定到組件的控制器上而不是scope上，詳情請查閱bingToController。

transclude：boolean，是否允許嵌入內容，默認false。

require：一個對象，需要其他指令的控制器被綁定到組件的控制器，對象的鍵指向屬性名稱，對象的值是其他指令控制器的名稱。

$...：額外的屬性被添加到指令工廠函數和控制器構造器函數。（這被使用于為組件路由提供注解）

return：

返回自身，用于鏈式調用。

3、aHrefSanitizationWhitelist([regexp])

恢復或者覆蓋白名單urls安全列表的正則表達式，主要用于阻止通過html鏈接進行的xss攻擊。任何將要通過數據綁定到a[href]的urls首先都要經過初始化并轉化為一個絕對url，如果這個url匹配aHrefSanitizationWhitelist的正則表達式規則，則會被添加到DOM中，否則轉化后的url將會加上'unsafe:‘前綴后才能被加入到DOM中。

參數：

regexp：RegExp，新的白名單正則表達式。

return：

如果參數不存在則返回現在的正則表達式，否則返回自身以供鏈式調用。

4、imgSrcSanitizationWhitelist([regexp])

和以上aHrefSanitizationWhitelist類似，不過這個是設置img[src]的白名單正則表達式。

5、debugInfoEnabled([enabled])

主要用于開啟和關閉運行時的debug信息，默認是true，例如為綁定的元素添加以下信息：

'ng-binding' CSS Class。

'ng-scope‘和'ng-isolated-scope‘ CSS Class。

'$binding‘一個數組，包含了綁定的表達式。

占位符注釋將會包含是什么指令或者binding引發了這個占位符，例如<!-- ngIf: shouldShow() -->

參數：

enabled：boolean

return：

如果包含參數則返回自身，否則返回現在的debug狀態。

6、strictComponentBindingsEnabled([enabled])

是否開啟嚴格的component bindings檢查，如果開啟，則除了那些包含了？的bindings，全部都要求在html標簽中指定相應的屬性。

默認false

參數和返回值和以上debug相同。

7、onChangesTtl(limit)

在復雜的應用程序中，$onChanges鉤子和bindings之間的依賴性可能會導致對這些鉤子的多個調用迭代，該函數可以設置迭代的次數。

默認是10次。

參數：

limit：integer，迭代的次數。

return：

如果設置了limit則返回自身，否則返回已經設置的limit。

8、commentDirectivesEnabled(enabled)

表明是否編譯注釋形式的指令，如果禁用將會提高編譯的性能，因為編譯器不需要去檢查注釋當編譯指令的時候。

默認是true，開啟。

參數和返回值和onChangesTtl(limit)類似。

9、cssClassDirectivesEnabled(enabled)

表明是否編譯Class形式的指令，如果禁用將會提高編譯的性能，因為編譯器不需要去檢查Class當編譯指令的時候。

默認是true，開啟。

參數和返回值和onChangesTtl(limit)類似。

以上這篇angular內置provider之$compileProvider詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持億速云。