Angular Recipe: Manipulate Dom

Angular JS

Manipulating the DOM from your directive is fairly simple.
You just have to use link function instead of controller into your directive.

Inside directives, it is best practice to use controller only when you want to share functions with other directives. All other times you should use link.

## *card.js* angular.module('myApp') .directive('myCard', function() { return { restrict: 'E', templateUrl: './templates/directives/my-card.html', scope: { header: '=', description: '=', dealed: '=' }, link: function(scope, element) { if (scope.dealed) { element.addClass('dealed'); } } }; }); Directives should Clean Up after themselves *(A clean DOM is a happy DOM)* Best Practice: angular.module('myApp') .directive("title", function() { return function(scope, element, $timeout) { ... scope.$on('$destroy', function() { element.tooltip('destroy'); }); }; }); Destroy method is called whenever the directive is removed (off hover) and its scope is destroyed. Creating, Using and Destroying attribute Directive: *\*.js* angular.module('MyApp') .directive('popover', function($timeout) { return function(scope, element, attr) { $timeout(function(){ element.popover({trigger: 'hover', content: attr.popover}); }); // clean up scope.$on('$destroy', function() { element.popover('destroy'); }); }; }); *\*.html* <div class="card" popover="{{note.title}} {{note.createdDate | date: 'MMM. dd'}}"> <h2 class="h3">{{note.title}}</h2> <p>{{note.createdDate | date: "'Created on a' EEEE 'in' MMMM"}}</p> </div> ---- ## see Also * [Angular Recipe: Passing data into your Directive](http://bloomlab.blogspot.com.ee/2015/10/angular-recipe-passing-data-into-your.html) * [Angular Recipe:Insert html string from js into html (solve Error: [$sce:unsafe])](http://bloomlab.blogspot.com.ee/2015/10/angular-recipe-insert-html-string-from.html) * [Keynote: AngularJS Filters](http://bloomlab.blogspot.com.ee/2015/10/ketnote-angularjs-filters.html) * [Keynote: AngularJS Services](http://bloomlab.blogspot.com.ee/2015/10/keynote-angularjs-services.html) * [Keynote: AngularJS Routing](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-routing.html) * [Keynote: AngularJS Do the custom things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-custom-things.html) * [Keynote: AngularJS Do the regular things](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-do-regular-things.html) * [Keynote: AngularJS Basics](http://bloomlab.blogspot.com.ee/2015/09/keynote-angularjs-basic-short-notes.html) * [Bootstrap Components](http://getbootstrap.com/components) * [AngularJS - API](https://docs.angularjs.org/api/ng) * [AngularJS - Developer Documentation](https://docs.angularjs.org/guide) * [AngularJS - Receipes with Angular](http://fdietz.github.io/recipes-with-angular-js/) * [AngularJS - Receipes github](https://github.com/fdietz/recipes-with-angular-js-examples) * [Keynote: Top JS frmeworks 2015](http://bloomlab.blogspot.com.ee/2015/03/top-javascript-frameworks-2015.html)