2

I'm just playing with angular directives, but somehow the comment way to add directives is not showing up. Here is the markup.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="angular.js"></script>
</head>

    <body ng-app="directive-app">

         <first-directive></first-directive>

         <div first-directive></div> 

         <div class=first-directive></div> 

         <!-- directive: first-directive -->     

         <script src="main.js"></script> 


</body>
</html>

Directive definition

var app=angular.module('directive-app',[]);

app.directive("firstDirective", function() {
    return {
        restrict : "EACM",  
        templateUrl : 'template.html'
    };
});

In template.html there is one h1 element. But comment way to add directives is not showing up in UI and in which case comment approach is even required.

Mahtab Alam
  • 1,810
  • 3
  • 23
  • 40

1 Answers1

5

Set replace option to true as follows

app.directive("firstDirective", function() {
  return {
    restrict: "EACM",
    replace: true,
    templateUrl: 'template.html'
  };
});

Here's demo.

Hoa
  • 3,179
  • 1
  • 25
  • 33
  • ya, that works can you give some explanation about that. Why replace is only required in case of comment – Mahtab Alam Jun 15 '17 at 09:46
  • 2
    @MahtabAlam First, get yourself familiar with the `replace` option, see https://stackoverflow.com/a/15286383/87972. When `replace` is `false`, Angular will try to put the template content inside the comment, that's why it's not visible. When `replace` is `true`, Angular will replace the comment with the template content, that's why it's visible. – Hoa Jun 15 '17 at 10:14
  • Thanks that helps @Hoa – Mahtab Alam Jun 15 '17 at 10:15
  • Hey, I want to know that what are the cases where we need to use directive as a comment? – Codiee Apr 18 '18 at 10:34