Directives in AngularJS are extended HTML attributes. AngularJS has a number of built-in directives, all starting with ng, such as:
AngularJS allows user-defined directives to extend the functionality of HTML in applications. The directives can attach a specified behavior to:
- Element (<macro-name></macro-name>)
- Attribute (<div macro-name><div>)
- CSS Class (<div class=“macro-name“>)
- Comments (<!– macro-name –>)
Create an Angular Provider
Directives are defined as Angular Providers.
In the main ServiceNow browser window, open Service Portal > Angular Providers.
Directive names use camelCase which must be referenced using snake-case in HTML. For example, a directive named myDirective is <my-directive> in HTML. In snake-case:
- All letters are lowercase
- Spaces are replaced by hyphens
- Hyphens are inserted before letters which were uppercase
The Client Script field defines what the directive does.
In this example, the directive has several properties:
- template: The HTML to render.
- restrict: Specifies which methods can invoke the directive: Element, Attribute, Class, or Comment.
- replace: Tells AngularJS to replace the element the directive is declared on.
- scope: An object that contains a property for each isolate scope binding. This is typically used when making components reusable.
- link: The link function is executed while attaching the template to the DOM.
The warning in the example is an ignorable warning stating the function does not have a name.
Any valid directive syntax can be used in an Angular Provider.