下面小编就为大家带来一篇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详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

最新资讯
6月全球移动应用发行商下载量排行榜:谷歌3.17亿次登顶

6月全球移动应用发行

Sensor Tower 商店情报数据显示,Google以3.17亿次下载,
海底火山是如何喷发的?

海底火山是如何喷发的

海底火山(Submarine Volcano)是指在浅海或大洋底部形成
国家发改委等十三部门发文,支持网络直播等多样化自主就业

国家发改委等十三部门

鼓励共享出行、餐饮外卖、团购、在线购药、共享住宿、
看完这些新冠病毒论文仍面如平湖者,可拜上将军……

看完这些新冠病毒论文

假设大家从第一天起就开始跟着论文,理解下诊治指南的更
植物的意识,是我们的错觉吗?

植物的意识,是我们的错

很多时候,我们可能会不由自主地忽略另一群重要的“地球
什么样的抗体对新冠病毒有强效?

什么样的抗体对新冠病

由美国斯克利普斯研究所)主导的一支科研团队,对近300种
最新文章
Vue实现图片与文字混输效果

Vue实现图片与文字混

用多了 JQuery ,习惯了使用JQuery的API操作 DOM ,几乎忘
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)

Vue实现点击当前元素

这篇文章主要介绍了Vue实现点击当前元素以外的地方隐
Vue实现验证码功能

Vue实现验证码功能

这篇文章主要为大家详细介绍了Vue实现验证码功能,文中
JS实现的雪花飘落特效示例

JS实现的雪花飘落特效

这篇文章主要介绍了JS实现的雪花飘落特效,结合实例形
微信小程序实现图片压缩

微信小程序实现图片压

这篇文章主要为大家详细介绍了微信小程序实现图片压缩
JavaScript实现京东放大镜效果

JavaScript实现京东放

这篇文章主要为大家详细介绍了JavaScript实现京东放大