Tutorial by Examples

Directives are one of the most powerful features of angularjs. Custom angularjs directives are used to extend functionality of html by creating new html elements or custom attributes to provide certain behavior to an html tag. directive.js // Create the App module if you haven't created it yet va...

demoApp.directive('demoDirective', function () { var directiveDefinitionObject = { multiElement: priority: terminal: scope: {}, bindToController: {}, controller: controllerAs: require: restrict: templateNamespace: template: templateU...

superman-directive.js angular.module('myApp', []) .directive('superman', function() { return { // restricts how the directive can be used restrict: 'E', templateUrl: 'superman-template.html', controller: function() { this.message = "I'm superman!&qu...

AngularJS directives are what controls the rendering of the HTML inside an AngularJS application. They can be an Html element, attribute, class or a comment. Directives are used to manipulate the DOM, attaching new behavior to HTML elements, data binding and many more. Some of examples of directives...

Creating a custom directive with isolated scope will separate the scope inside the directive from the outside scope, in order to prevent our directive from accidentally change the data in the parent scope and restricting it from reading private data from the parent scope. To create an isolated scop...

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' }, ...

Sometimes you may need additional features from a directive. Instead of rewriting (copy) the directive, you can modify how the directive behaves. The decorator will be executed during $inject phase. To do so, provde a .config to your module. The directive is called myDirective, so you have to con...

Angular js directives can be nested or be made interoperable. In this example, directive Adir exposes to directive Bdir it's controller $scope, since Bdir requires Adir. angular.module('myApp',[]).directive('Adir', function () { return { restrict: 'AE', controlle...