angular内置provider之$compileProvider详解_网络技术_宿州市腾雀网络科技有限公司

angular内置provider之$compileProvider详解

发布时间 - 2026-01-11 03:25:44 点击率：次

一、方法概览

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引发了这个占位符，例如