Replacing the Template Element

You can add a directive template as a child to the AngularJS template element where you define it, or you can replace it by using the replace attribute. To illustrate this, look at the following directive:

Click here to view code image

directive('myDirective', function() {
  return {
    replace: true,
    templateUrl: '<div>directive</div>'
  };
});

Then look at the following template code:

<div>
  <span my-directive></span>
</div>

The compiler sees that replace is true and replaces the inner <span> element as shown below:

<div>
  <div>directive</div>
</div>