ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Create Custom Directives in AngularJS<p>Hi <a class="username" rel="rani"> rani</a>,</p> <p>Custom directives are used in AngularJS to extend the functionality of HTML. Custom directives are defined using directive function.</p> <p>A custom directive simply replaces the element for which it is activated.</p> <p>AngularJS provides support to create custom directives for following type of elements.</p> <ul style="list-style-type: undefined;"> <li><strong>Element directives</strong> : Directive activates when a matching element is encountered.</li> <li><strong>Attribute</strong> : Directive activates when a matching attribute is encountered.</li> <li><strong>CSS</strong> : Directive activates when a matching css style is encountered.</li> <li><strong>Comment</strong> : Directive activates when a matching comment is encountered.</li> </ul> <p>For more details refer below links.</p> <p><a href="https://www.c-sharpcorner.com/UploadFile/f0b2ed/angularjs-custom-directives/" target="_blank">AngularJS Custom Directives</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <p><strong>MyHTML.htm</strong></p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table class=&#34;table table-responsive&#34;&gt; &lt;tr&gt;&lt;th&gt;Id&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Country&lt;/th&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;John Hammond&lt;/td&gt;&lt;td&gt;United States&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Mudassar Khan&lt;/td&gt;&lt;td&gt;India&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Suzanne Mathews&lt;/td&gt;&lt;td&gt;France&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Robert Schidner&lt;/td&gt;&lt;td&gt;Russia&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong>Default.htm</strong> </p> <pre class="brush: html">&lt;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34;&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; var app = angular.module(&#39;MyApp&#39;, []); app.directive(&#39;myTable&#39;, function () { var obj = { restrict: &#39;A&#39;, template: &#39;&lt;table class=&#34;table table-responsive&#34;&gt;&#39; + &#39;&lt;tr&gt;&lt;th&gt;Id&lt;/th&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Country&lt;/th&gt;&lt;/tr&gt;&#39; + &#39;&lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;John Hammond&lt;/td&gt;&lt;td&gt;United States&lt;/td&gt;&lt;/tr&gt;&#39; + &#39;&lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;Mudassar Khan&lt;/td&gt;&lt;td&gt;India&lt;/td&gt;&lt;/tr&gt;&#39; + &#39;&lt;tr&gt;&lt;td&gt;3&lt;/td&gt;&lt;td&gt;Suzanne Mathews&lt;/td&gt;&lt;td&gt;France&lt;/td&gt;&lt;/tr&gt;&#39; + &#39;&lt;tr&gt;&lt;td&gt;4&lt;/td&gt;&lt;td&gt;Robert Schidner&lt;/td&gt;&lt;td&gt;Russia&lt;/td&gt;&lt;/tr&gt;&#39; + &#39;&lt;/table&gt;&#39; } return obj; }); app.directive(&#39;myHtml&#39;, function () { var obj = { restrict: &#39;E&#39;, templateUrl: &#39;MyHTML.htm&#39; } return obj; }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div ng-app=&#34;MyApp&#34;&gt; &lt;h3&gt;Attribute directives&lt;/h3&gt; &lt;div my-table&gt; &lt;/div&gt; &lt;h3&gt;Element directives&lt;/h3&gt; &lt;my-html /&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/gWOnpSV.jpg" alt="" width="245" height="417" /></p>https://www.aspforums.net:443/Threads/440882/Create-Custom-Directives-in-AngularJS/https://www.aspforums.net:443/Threads/440882/Create-Custom-Directives-in-AngularJS/Fri, 23 Aug 2019 05:58:40 GMT