Custom attributes

A custom directive in AngularJS can be used as an element, attribute, and a comment. In the previous chapter, we learned about the custom directive that is used as an element inside an application. In this chapter, we will explore how the custom directive can be used as an attribute and help in responsive application development.

We will create a custom attribute named breakpoint, which can be used in the HTML element or with the body tag of the document. This custom attribute takes a serialized JSON object as the string that contains <key, value> pairs. A sample of this string is as follows:

{
   "400":"small-screen",
   "700":"medium-screen",
   "1000":"large-screen"
}

The details of the previous JSON string are as follows

  • key: In the ...

Get Responsive Web Design with AngularJS now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.