transclusion<\/code> concept, in terms of Angular directives.<\/p>\n1.1 What are Directives?<\/h2>\n
But, what are directives<\/a> in Angular.js?<\/em><\/p>\n1.1.1 A definition<\/h3>\n
In general, directives is one of the reasons that Angular.js is famous today. They are essentially custom HTML tags and attributes that you can create to do anything one can imagine.
\n[ulp id=’LXJcMJZXSsqGXYW8′]<\/p>\n
1.1.2 Official Definition<\/h3>\n
Directives<\/a> are markers on a DOM<\/a> element (attributes, CSS classes, names of elements, comments) that tell Angular’s HTML compiler<\/a> to attach a specific behavior to that DOM element (i.e through event listeners), or even to transform the DOM element and its children. Some of the built-in Angular directives are: ngBind<\/code><\/a>, ngModel<\/code><\/a> and ngClass<\/code><\/a>.<\/p>\nIn addition to all the built-in Angular.js directives, you can also create your own directives<\/a>, by using the .directive<\/code> function.<\/p>\nSuch directives look like this, on their html part:<\/p>\n
index.html<\/em><\/span><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<script src="http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular.min.js"><\/script>\r\n<script src="second.js"><\/script>\r\n<body ng-app="app">\r\n <div test-directive><\/div>\r\n Hello from page\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nwhereas the javascript part is like:<\/p>\n
second.js<\/em><\/span><\/p>\n\r\nvar app = angular.module("app", []);\r\napp.directive("testDirective", function() {\r\n return {\r\n restrict : "EA",\r\n template : "<h1>Hey, I'm the directive's content!<\/h1>"\r\n };\r\n});\r\n<\/pre>\nAs expected, the output firstly contains the template inserted from the directive and then the actual html content of the page itself:<\/p>\n![\"Figure](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/1-1.jpg\")
<\/a>Figure 1. Sample Directive<\/figcaption><\/figure>\nDid you notice the transition between the camel-case, used in the js part and the dash (“-“), when on html, according to the directive’s reference?<\/em><\/p>\nThere are some points here, according to directives:<\/p>\n
\n- A camel-case name must be used for naming a directive (js), but for invoking it (html), a dash (“-“) separated name must be used (i.e.
testDirective<\/code> -> test-directive<\/code>).<\/li>\n- The
restrict<\/code> property is used to restrict the directive’s invocation by some of the existing methods.<\/li>\n- The
template<\/code> property is used to define the html content that the specified directive will contain.<\/li>\n<\/ul>\nFor instance, the legal restrict values are:<\/p>\n
\nE<\/code> for element’s name<\/li>\nA<\/code> for attribute<\/li>\nC<\/code> for class<\/li>\nM<\/code> for comment<\/li>\n<\/ul>\nBy default, the restrict<\/code> property has a value of EA<\/code>, which means that both element names and attribute names can invoke the directive.<\/em><\/p>\nIn addition, here is the full list of all the possible attributes that one could use into a directive, along with their definitions:<\/p>\n
\nrestrict<\/code> : Determines where a directive can be used.<\/li>\nscope<\/code> : Used to create a new child scope or an isolate scope.<\/li>\ntemplate<\/code> : Declares the content that will be displayed from the directive; this, except from pure HTML, can always contain Angular features, too (i.e. data-binding expressions, other directives).<\/li>\ntemplateUrl<\/code> : Provides the path to the template that should used by the directive. Optionally, this could contain a DOM element id, when templates are defined in <script><\/code> tags.<\/li>\ncontroller<\/code> : The controller module that will be associated with the directive template.<\/li>\nlink<\/code> : A function that is mainly used for DOM manipulation tasks<\/li>\npriority<\/code> : specifies the order in which directives are applied to the DOM. (Directives are compiled in priority order, from the highest to lowest. The default priority is “0”.)<\/li>\nterminal<\/code> : if set to true then the current priority will be the last
\nset of directives which will execute (any directives at the current priority will still execute as the order of
\nexecution on same priority is undefined).<\/li>\nrequire<\/code> : require another directive and inject its controller as the fourth argument to the linking function.<\/li>\ntype<\/code> : string representing the document type used by the markup.<\/li>\ntransclude<\/code> : compile the content of the element and make it available to the directive.<\/li>\ncompile<\/code> : deals with transforming the template DOM. (Since most directives do not do
\ntemplate transformation, it is not used often.)<\/li>\n<\/ul>\nReturning back to our previous small example, what needs to be mentioned is that the directive is restricted to only be invoked either from elements or from attributes ( restrict : \"EA\"<\/code> ), but there’s not a specific reason -for this example- to include the E<\/code> parameter, as its template (HTML part of the directive) here used as an attribute and specifically, a div<\/code> attribute (<div test-directive><\/div><\/code>). That is, the output would be the same as if we only used the A<\/code> value ( restrict: 'A'<\/code> ).<\/p>\n2. How to build Directives<\/h2>\n2.1 General Concepts<\/h3>\n
In general, there are two ways a directive could be built. The one was depicted in the small example above is the Directive Definition Object (DDO)<\/a>, which is like the foundation of a directive. It tells Angular how the directive should be handled during the compilation cycle and what it should do. In technical terms, it is an object returned by the directive declaration that provides instructions to the compiler. <\/p>\nSpecifically, the DDO is where you can set things such as how it is going to be marked up in the HTML, how its scope is going to interact with the outside world and if it is going to use the existing HTML or load new HTML into the directive’s content.<\/p>\n
The controller function works just like controllers in the rest of your application. It is responsible for initializing the directive’s state and defining the functionality for it as well.<\/p>\n
That was a brief introduction to several of the DDO aspects, also declared in the previous’ section relative list of attributes and is proposed for common, daily-usage of directives, which means that for more advanced concepts the above DDO concepts or even the example previously displayed, are not enough. Here come the $compile<\/code> and $link<\/code> functions.<\/p>\n2.2 The $compile and $link functions<\/h3>\n
If you are in the need of a more complex behavior inside your directive (=something that cannot be implemented with an HTML template), the $compile<\/code> and $link<\/code> functions come to the rescue. In general, these functions define how the directive is to modify the HTML markup that matched the directive.<\/p>\nThe $compile<\/code> function allows the directive to manipulate the DOM before it is compiled and linked thereby, allowing it to CRUD -if I may say- (ok, just kidding: add\/change\/remove<\/b>) directives, as well as, add\/change\/remove other DOM elements. It is called once for each occurence of the directive in the HTML page. The $compile<\/code> function finishes its execution, by returning the $link<\/code> function<\/code>.<\/p>\nThe $link<\/code> function is called every time the element is about to be bound to data in the $scope<\/code> object. The concept is that you add the $compile<\/code> function to the DDO and it has to return the $link<\/code> function when executed.<\/p>\nIn general, here is the standard format of that two:<\/p>\n
\r\ndirective.compile = function(element, attributes) {\r\n \/\/ One-time element configuration.\r\n\r\n var linkFunction = function($scope, element, atttributes) {\r\n \/\/ Bind element to data in $scope.\r\n }\r\n\r\n return linkFunction;\r\n}\r\n<\/pre>\n2.3 Link function Example<\/h3>\n
Before displaying a simple example of the $link<\/code> function, what should be initially mentioned is the fact that there are many times that the $compile<\/code> function is not necessary, as you don’t actually need it in your specific directive’s functionality. In that case, only the $link<\/code> function could be used directly on the DDO.<\/p>\nLet’s now adjust the previous simple example to use the $link<\/code> function, in order to replace the content of the template<\/code> attribute, on runtime and specifically, when the template element is about to be bound to data in the $scope object:<\/p>\nindex.html<\/em><\/span><\/p>\n\r\n<!DOCTYPE html>\r\n<html>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.4.8\/angular.min.js\"><\/script>\r\n<script src=\"app.js\"><\/script>\r\n<body ng-app=\"myApp\">\r\n <div my-directive ng-controller=\"myController\" >\r\n<\/div>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nAnd here is the angular’s part.<\/p>\n
app.js<\/em><\/span><\/p>\n\r\nvar myApp = angular.module(\"myApp\", []);\r\n myApp.directive('myDirective', function() {\r\n var directive = {};\r\n\r\n directive.restrict = 'A'; \r\n template : \"Hey, I'm the directive's content, but I won't be displayed!<\/h1>\"\r\n \r\n directive.link = function($scope, element, attributes) {\r\n element.html(\"This is the new content, overridden from the $link<\/code> function: \" + $scope.content);\r\n element.css(\"background-color\", \"#cccccc\");\r\n }\r\n \r\n\r\n return directive;\r\n })\r\n myApp.controller(\"myController\", function($scope, $http) {\r\n\r\n $scope.content = \"I'm the directive's updated content!\";\r\n \r\n });\r\n<\/pre>\nAs previously mentioned, I just went only for the attribute (A<\/code>) restriction here, as line 5 shows. In line 6, we have the common content of the directive’s template, which will not actually be displayed to the end-user, as when the element is about to be bound to data in the $scope<\/code> object, the $link<\/code> function will be called and replace the template’s content (line 9), with the content set in the controller (line 18).<\/p>\nAs expected and also explained from the above, here is the output:<\/p>\n![\"Figure](\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/01\/figure2-1.jpeg\")
<\/a>Figure 2. App screenshot<\/figcaption><\/figure>\n3. Download the source code<\/h2>\n
This was an example of Angular.js Custom Directives.<\/p>\n