SoFunction
Updated on 2025-04-11

Detailed explanation of the $compileProvider built-in angular provider

1. Method overview

(name, directiveFactory)

(name, options)

([regexp]);

([regexp]);

([enabled]);

([enabled]);

(limit);

(enabled);

(enabled);

2. Method explanation

1、directive(name, directiveFactory)

Register a directive using compiler

parameter:

name: string, name of the directive.

directiveFactory: function, directive constructor factory function.

return:

Return to itself and call it in a supply chain manner.

2、component(name, options)

Register a component using compiler. A component is a special directive that contains the UI itself and always uses independent scope and restrict: 'E' by default. The definition of a component is simple, options is an object containing a series of properties, and always enforces the use of best practices, such as controllerAS: $ctrl.

parameter:

name: The name of the component.

options: An object containing the following optional properties.

controller: string|function, the controller of the instruction, the string represents the name of a controller injected into the module.

controllerAS: string, a reference to the controller, default is '$ctrl'. If it is defined, there will be an attribute with the name on the scope, such as scope.$ctrl. Then we can use the attribute in the controller in html, such as <div>{{$}}<div>

template: string|function, component template. If it is a function, the function has the following two parameters.

$element: The current element.

$attrs: Current element attribute object.

templateUrl: string|function, the path of the component template. If it is a function, the parameters are the same as the above template.

bindings: An object that is used to bind between the attributes of an element and the component attributes, and the bound value is always bound to the component's controller rather than the scope. For details, please refer to bingToController.

transclude: boolean, whether to allow embedding, default false.

require: An object, the controller that requires other instructions is bound to the component's controller, the key of the object points to the property name, and the value of the object is the name of the other instruction controller.

$...: Extra attributes are added to the instruction factory function and the controller constructor function. (This is used to provide annotation for component routing)

return:

Returns itself for chained calls.

3、aHrefSanitizationWhitelist([regexp])

Recover or overwrite the regular expression of the whitelist URLs safe list, mainly used to prevent xss attacks through html links. Any urls that are bound to a[href] through data must first be initialized and converted into an absolute url. If this url matches the regular expression rule of aHrefSanitizationWhitelist, it will be added to the DOM. Otherwise, the converted url will be prefixed with 'unsafe:' to be added to the DOM.

parameter:

regexp:RegExp, new whitelist regular expression.

return:

If the parameter does not exist, the current regular expression will be returned, otherwise it will be called in a supply chain manner.

4、imgSrcSanitizationWhitelist([regexp])

Similar to the above aHrefSanitizationWhitelist, but this is a whitelist regular expression that sets img[src].

5、debugInfoEnabled([enabled])

It is mainly used to enable and close the debug information of the runtime. The default is true, for example, add the following information to the bound elements:

'ng-binding' CSS Class。

'ng-scope' and 'ng-isolated-scope' CSS Class.

'$binding' an array containing bound expressions.

The placeholder comment will contain what command or binding triggers this placeholder, for example <!-- ngIf: shouldShow() -->

parameter:

enabled:boolean

return:

If the parameters are included, it returns itself, otherwise it returns the current debug status.

6、strictComponentBindingsEnabled([enabled])

Is strict component bindings check enabled, and if enabled, except those included? All bindings require the corresponding attributes to be specified in the html tag.

Default false

The parameters and return values ​​are the same as the above debug.

7、onChangesTtl(limit)

In complex applications, the dependency between the $onChanges hook and bindings may result in multiple iterations of call to these hooks, which can set the number of iterations.

The default is 10 times.

parameter:

limit: integer, the number of iterations.

return:

If limit is set, it returns itself, otherwise it returns the already set limit.

8、commentDirectivesEnabled(enabled)

Indicates whether to compile annotated instructions. If disabled, it will improve the compilation performance because the compiler does not need to check comments when compiling instructions.

The default is true, enabled.

The parameters and return values ​​are similar to onChangesTtl(limit).

9、cssClassDirectivesEnabled(enabled)

Indicates whether to compile the Class form directive. If disabled, it will improve the compilation performance, because the compiler does not need to check the Class when compiling the directive.

The default is true, enabled.

The parameters and return values ​​are similar to onChangesTtl(limit).

The above detailed explanation of the $compileProvider built-in angular provider is the entire content shared by the editor. I hope it can give you a reference and I hope you can support me more.