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)类似。

时间: 2024-11-12 01:09:54

angular内置provider之$compileProvider的相关文章

angular内置过滤器-filter

这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就是过滤器的名字~ 这个过滤器是干嘛的呢? 它的作用是: '从数组中过滤出需要的项,放入新的数组并返回这个新数组.' 一.用在html模板里: 因为是用来过滤数组,所以这个过滤器基本上都用在ng-repeat指令上,比如: <div ng-repeat="list in lists | filt

Angular内置指令

以ng前缀开头的都是内置指令,因此不要以ng开头命名自定义指令.此外还有其他内置指令在标签中不易发现,如<a>和<form>. 一,布尔属性 1  ng-disabled 可以在input,textarea,select,button绑定 例一:按钮一直禁用,直到用户在文本字段中输入内容 <input type="text" ng-model="someProperty" placeholder="TypetoEnable&q

简话Angular 03 Angular内置表达式大全

一句话: 大多数html标签属性和事件都有一个对应的ng指令 说明:这些指令和原生html最大的区别就是可以动态更新.比如一个div的样式用ng-class后,我们就可以随意应用css class. 1. 内置指令大全 ng-include 包含一个文件 ng-href ng-src 对应 href src ng-disabled ng-readonly 对应 disabled readonly ng-checked ng-selected ng-options ng-true-value ng

Angular内置指令(一)

要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng-class,ng-style ng-disabled 当它的值返回true时表示禁用当前元素,返回false时什么都不做 <body> <!--在文本框输入内容时禁用按钮--> <input type="text" ng-model="name&qu

Angular——内置指令

内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否隐藏,true隐藏.false不隐藏 ng-if控制元素是否"存在",true存在.false不存在 ng-src增强图片路径 ng-href增强地址 ng-class控制类名 ng-include引入模板 ng-disabled表单禁用 ng-readonly表单只读 ng-checke

Angular内置指令(二)

目录: $rootScope,ng-app,.run(),ng-include,ng-repeat,ng-if,ng-switch,ng-init ng-show/ng-hide,ng-model,ng-bind-template,ng-change,ng-submit,ng-cloak,ng-bind 详细介绍: $rootScope 是作用域链的起始点,任何嵌套在ng-app内的指令都会继承$rootScope ng-app 任何具有ng-app属性的dom元素都将被标记为$rootScop

Angular——内置过滤器

基本介绍 在AngularJS中使用过滤器格式化展示数据,在"{{}}"中使用"|"来调用过滤器,使用":"传递参数. 基本使用 过滤器可以串起来使用,只要用   |  来衔接就行了,可以将上次返回的结果,作为下次的参数再次进行处理,所以 | 也被称为是管道符 1.currency将数值格式化为货币格式 2.date日期格式化,年(y).月(M).日(d).星期(EEEE/EEE).时(H/h).分(m).秒(s).毫秒(.sss),也可以组合到

Angular中的内置指令和自定义指令

NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减少DOM操作,实现数据绑定,与业务逻辑进行交互. How: 指令主要分为两种:内置指令和自定义指令,通过下面的例子,简单记录一下如何去使用. 内置指令 在官方API文档上罗列了很多指令,内置指令可以分为:普通指令 和 事件指令,他们都是作用于HTML之上的,通过添加属性的方式来实现的.简单看一下一些

高效利用Angular中内置服务

AngularJS中为我们提供了众多的内置服务,通过这些内置服务可以轻松的实现一些常用功能.下面对Angular中常用的内置服务进行一下总结. 1.$location服务 $location服务用于返回当前页面的URL地址,示例代码如下: var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $location) { $scope.myUrl = $location.absU