Guide: Directives

Note: this guide is targeted towards developers who are already familiar with AngularJS basics. If you're just getting started, we recommend the tutorial first. If you're looking for the directives API, we recently moved it to $compile. This document explains when you'd want to create your own directives in your AngularJS app, and how to implement them. What are Directives? At a high level, directives are markers on a DOM element (such as an attribute, element name, comment or CSS class) t

ngTouch

Installation First include angular-touch.js in your HTML: <script src="angular.js"> <script src="angular-touch.js"> You can download this file from the following places: Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-touch.js Bower e.g. bower install angular-touch@X.Y.Z code.angularjs.org e.g. "//code.angularjs.org/X.Y.Z/angular-touch.js" where X.Y.Z is the AngularJS version you are running. Then load the module in your application by adding it as a

ngMessages

Installation First include angular-messages.js in your HTML: <script src="angular.js"> <script src="angular-messages.js"> You can download this file from the following places: Google CDN e.g. //ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-messages.js Bower e.g. bower install angular-messages@X.Y.Z code.angularjs.org e.g. "//code.angularjs.org/X.Y.Z/angular-messages.js" where X.Y.Z is the AngularJS version you are running. Then load the module in your application by

ngApp

directive in module ng Use this directive to auto-bootstrap an AngularJS application. The ngApp directive designates the root element of the application and is typically placed near the root element of the page - e.g. on the <body> or <html> tags. There are a few things to keep in mind when using ngApp: only one AngularJS application can be auto-bootstrapped per HTML document. The first ngApp found in the document will be used to define the root element to auto-bootstrap as an

ngMessages.ngMessagesInclude

directive in module ngMessages ngMessagesInclude is a directive with the purpose to import existing ngMessage template code from a remote template and place the downloaded template code into the exact spot that the ngMessagesInclude directive is placed within the ngMessages container. This allows for a series of pre-defined messages to be reused and also allows for the developer to determine what messages are overridden due to the placement of the ngMessagesInclude directive. Directive I

$sce.trustAsJs()

trustAsJs(value); Shorthand method. $sce.trustAsJs(value) â $sceDelegate.trustAs($sce.JS, value) Parameters Param Type Details value * The value to trustAs. Returns * An object that can be passed to $sce.getTrustedJs(value) to obtain the original value. (privileged directives only accept expressions that are either literal constants or are the return value of $sce.trustAs.)

uppercase

filter in module ng Converts string to uppercase. Usage In HTML Template Binding {{ uppercase_expression | uppercase}} In JavaScript $filter('uppercase')()

ngMessages.ngMessageExp

directive in module ngMessages ngMessageExp is a directive with the purpose to show and hide a particular message. For ngMessageExp to operate, a parent ngMessages directive on a parent DOM element must be situated since it determines which messages are visible based on the state of the provided key/value map that ngMessages listens on. Directive Info This directive creates new scope. This directive executes at priority level 1. Usage <!-- using attribute directives --> <ANY ng

ngAria.provider

Name Description $ariaProvider Used for configuring the ARIA attributes injected and managed by ngAria.

ngMessageFormat.$$messageFormat

service in module ngMessageFormat Angular internal service to recognize MessageFormat extensions in interpolation expressions. For more information, see: https://docs.google.com/a/google.com/document/d/1pbtW2yvtmFBikfRrJd8VAsabiFkKezmYZ_PbgdjQOVU/edit