Tutorial by Examples

Directives comes with the AngularJS library itself. A sample directive can be created as: angular.module('simpleDirective', []) .directive('helloData', function() { return { template: 'Hello, {{data}}' }; }); And can be used as: JS: angular.module('app', ['simpleDirective']) .con...

Directives can be used to build reusable components. Here is an example of a "user box" component: userBox.js angular.module('simpleDirective', []).directive('userBox', function() { return { scope: { username: '=username', reputation: '=reputation' }, ...

Our first element directive will not do much: it will just calculate 2+2 and will be called in html like this: <my-calculator></my-calculator> Notice the name of the directive is myCalculator (in CamelCase), but in html it's used as my-calculator (in lisp-case). Since we want our di...

Link function is best way in custom directives to manipulate DOM. It takes three attributes as input (scope, element, attribute) in sequence scope: its local scope object of directive. element: html element on which directive is used. attribute: it gives access to all attributes used in element ...