![\"angularjs\"](\"\/blog\/wp-ttn-blog\/uploads\/2014\/12\/angularjs.jpg\")
<\/p>\n<\/p>\n
In AngularJS, we can easily write our own custom directives to achieve required functionality. There are certain attributes which we provide in directive definition like There is one more attribute named : <\/p>\n Lets understand it with an example. We have a ngModel.$render = function() { element.bind(‘keyup’, function() { function write() { <\/div> Here, we provide There are various functions related to NgModelController like So, in this way we can explicitly provide ng-model to those DOM elements for which angular donot implicitly provide ng-model like all input elements.<\/p>\n Hope it helps \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":" In Directives there is one more attribute named : “require” , which gives us the liberty to include another directive and inject its controller as the fourth argument to the linking function. It accept both string as well as array type. In case of array, the controllers are included in the given order. There are some prefixes, when applied before controller name, provides different functionality.<\/p>\n","protected":false},"author":65,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":3},"categories":[1],"tags":[955,1155,55,1492,1493],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/15036"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=15036"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/15036\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=15036"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=15036"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=15036"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}restrict<\/code> , scope<\/code> , template<\/code>, link<\/code>, transclude<\/code> etc.<\/p>\nrequire<\/code> , which gives us the liberty to include another directive and inject its controller as the fourth argument to the linking function. It accept both string as well as array type. In case of array, the controllers are included in the given order. There are some prefixes, when applied before controller name, provides different functionality:<\/p>\n\n
<div><\/code> and we want to assign ng-model to it which is not provided in angular by default. So, we write a custom directive for it and implement the required task inside it.
\n[js]
\nangular.module(‘demoApp’, []).directive(‘contenteditable’, function() {
\n return {
\n restrict: ‘A’,
\n require: ‘?ngModel’,
\n link: function(scope, element, attrs, ngModelCntrl) {
\n if(!ngModel) return;<\/p>\n
\n element.html(ngModel.$viewValue || ”);
\n };<\/p>\n
\n scope.$apply(write);
\n });
\n write();<\/p>\n
\n ngModel.$setViewValue(element.html());
\n }
\n }
\n };
\n});
\n[\/js]
\nThe html file will use this directive like:
\n[js]
\n<div id="contentBox" style=’height: 55px’><\/p>\n
\n[\/js]<\/p>\nngModel<\/code> in require attribute and therefore we get ngModelCntrl<\/code> as fourth augument which is an instance of the required NgModelController<\/code>( built-in controller to handle setting our model value).<\/p>\n$viewValue()<\/code>, $modelValue()<\/code>, $setViewValue()<\/code> etc, which help us to play with it.<\/p>\n