Methods
-
directive(name, directiveFactory);
Register a new directive with the compiler.
Parameters
Param Type Details name string
Object
Name of the directive in camel-case (i.e.
ngBind
which will match asng-bind
), or an object map of directives where the keys are the names and the values are the factories.directiveFactory function()
Array
An injectable directive factory function. See the directive guide and the compile API for more info.
Returns
ng.$compileProvider
Self for chaining.
-
component(name, options);
Register a component definition with the compiler. This is a shorthand for registering a special type of directive, which represents a self-contained UI component in your application. Such components are always isolated (i.e.
scope: {}
) and are always restricted to elements (i.e.restrict: 'E'
).Component definitions are very simple and do not require as much configuration as defining general directives. Component definitions usually consist only of a template and a controller backing it.
In order to make the definition easier, components enforce best practices like use of
controllerAs
,bindToController
. They always have isolate scope and are restricted to elements.Here are a few examples of how you would usually define components:
var myMod = angular.module(...); myMod.component('myComp', { template: '<div>My name is {{$ctrl.name}}</div>', controller: function() { this.name = 'shahar'; } }); myMod.component('myComp', { template: '<div>My name is {{$ctrl.name}}</div>', bindings: {name: '@'} }); myMod.component('myComp', { templateUrl: 'views/my-comp.html', controller: 'MyCtrl', controllerAs: 'ctrl', bindings: {name: '@'} });
For more examples, and an in-depth guide, see the component guide.
See also $compileProvider.directive().Parameters
Param Type Details name string
Name of the component in camelCase (i.e.
myComp
which will match<my-comp>
)options Object
Component definition object (a simplified directive definition object), with the following properties (all optional):
-
controller
â{(string|function()=}
â controller constructor function that should be associated with newly created scope or the name of a registered controller if passed as a string. An emptynoop
function by default. -
controllerAs
â{string=}
â identifier name for to reference the controller in the component's scope. If present, the controller will be published to scope under thecontrollerAs
name. If not present, this will default to be$ctrl
. -
template
â{string=|function()=}
â html template as a string or a function that returns an html template as a string which should be used as the contents of this component. Empty string by default.If
template
is a function, then it is injected with the following locals:-
$element
- Current element -
$attrs
- Current attributes object for the element
-
-
templateUrl
â{string=|function()=}
â path or function that returns a path to an html template that should be used as the contents of this component.If
templateUrl
is a function, then it is injected with the following locals:-
$element
- Current element -
$attrs
- Current attributes object for the element
-
-
bindings
â{object=}
â defines bindings between DOM attributes and component properties. Component properties are always bound to the component controller and not to the scope. SeebindToController
. -
transclude
â{boolean=}
â whether content transclusion is enabled. Disabled by default. -
$...
â additional properties to attach to the directive factory function and the controller constructor function. (This is used by the component router to annotate)
Returns
ng.$compileProvider
the compile provider itself, for chaining of function calls.
-
-
aHrefSanitizationWhitelist([regexp]);
Retrieves or overrides the default regular expression that is used for whitelisting of safe urls during a[href] sanitization.
The sanitization is a security measure aimed at preventing XSS attacks via html links.
Any url about to be assigned to a[href] via data-binding is first normalized and turned into an absolute url. Afterwards, the url is matched against the
aHrefSanitizationWhitelist
regular expression. If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with'unsafe:'
string and only then is it written into the DOM.Parameters
Param Type Details regexp (optional)RegExp
New regexp to whitelist urls with.
Returns
RegExp
ng.$compileProvider
Current RegExp if called without value or self for chaining otherwise.
-
imgSrcSanitizationWhitelist([regexp]);
Retrieves or overrides the default regular expression that is used for whitelisting of safe urls during img[src] sanitization.
The sanitization is a security measure aimed at prevent XSS attacks via html links.
Any url about to be assigned to img[src] via data-binding is first normalized and turned into an absolute url. Afterwards, the url is matched against the
imgSrcSanitizationWhitelist
regular expression. If a match is found, the original url is written into the dom. Otherwise, the absolute url is prefixed with'unsafe:'
string and only then is it written into the DOM.Parameters
Param Type Details regexp (optional)RegExp
New regexp to whitelist urls with.
Returns
RegExp
ng.$compileProvider
Current RegExp if called without value or self for chaining otherwise.
-
debugInfoEnabled([enabled]);
Call this method to enable/disable various debug runtime information in the compiler such as adding binding information and a reference to the current scope on to DOM elements. If enabled, the compiler will add the following to DOM elements that have been bound to the scope
-
ng-binding
CSS class -
$binding
data property containing an array of the binding expressions
You may want to disable this in production for a significant performance boost. See Disabling Debug Data for more.
The default value is true.
Parameters
Param Type Details enabled (optional)boolean
update the debugInfoEnabled state if provided, otherwise just return the current debugInfoEnabled state
Returns
*
current value if used as getter or itself (chaining) if used as setter
-
-
onChangesTtl(limit);
Sets the number of times
$onChanges
hooks can trigger new changes before giving up and assuming that the model is unstable.The current default is 10 iterations.
In complex applications it's possible that dependencies between
$onChanges
hooks and bindings will result in several iterations of calls to these hooks. However if an application needs more than the default 10 iterations to stabilize then you should investigate what is causing the model to continuously change during the$onChanges
hook execution.Increasing the TTL could have performance implications, so you should not change it without proper justification.
Parameters
Param Type Details limit number
The number of
$onChanges
hook iterations.Returns
number
object
the current limit (or
this
if called as a setter for chaining)
Please login to continue.