How to use the ‘replace’ feature for custom AngularJS directives?

by

When you have replace: true you get the following piece of DOM:

<div ng-controller="Ctrl" class="ng-scope">
    <div class="ng-binding">hello</div>
</div>

whereas, with replace: false you get this:

<div ng-controller="Ctrl" class="ng-scope">
    <my-dir>
        <div class="ng-binding">hello</div>
    </my-dir>
</div>

So the replace property in directives refer to whether the element to which the directive is being applied (<my-dir> in that case) should remain (replace: false) and the directive’s template should be appended as its child,

OR

the element to which the directive is being applied should be replaced (replace: true) by the directive’s template.

In both cases the element’s (to which the directive is being applied) children will be lost. If you wanted to perserve the element’s original content/children you would have to translude it. The following directive would do it:

.directive('myDir', function() {
    return {
        restrict: 'E',
        replace: false,
        transclude: true,
        template: '<div>{{title}}<div ng-transclude></div></div>'
    };
});

In that case if in the directive’s template you have an element (or elements) with attribute ng-transclude, its content will be replaced by the element’s (to which the directive is being applied) original content.

See example of translusion http://plnkr.co/edit/2DJQydBjgwj9vExLn3Ik?p=preview

See this to read more about translusion.

More Related Contents:

  1. Is this a “Deferred Antipattern”?
  2. When to favor ng-if vs. ng-show/ng-hide?
  3. AngularJS 1.5+ Components do not support Watchers, what is the work around?
  4. What is the best way to conditionally apply attributes in AngularJS?
  5. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  6. Unit Testing AngularJS directive with templateUrl
  7. How to select an element by classname using jqLite?
  8. AngularJS ng-style with a conditional expression
  9. Confused about Angularjs transcluded and isolate scopes & bindings
  10. Angular: calling controller function inside a directive link function using &
  11. Rendering directives within $sce.trustAsHtml
  12. How to allow only a number (digits and decimal point) to be typed in an input?
  13. Angular directive how to add an attribute to the element?
  14. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  15. get original element from ng-click
  16. angular directive encapsulating a delay for ng-change
  17. angularjs share data config between controllers
  18. AngularJS watch DOM change
  19. How do I apply an AngularJS directive based on a class set by ng-class?
  20. $apply vs $digest in directive testing
  21. AngularJS leaves comments in HTML: is it possible to remove them?
  22. When to use the AngularJS `$onInit` Life-Cycle Hook
  23. AngularJS – how to override directive ngClick
  24. AngularJS: ngInclude vs directive
  25. Angular directive name: only lower case letters allowed?
  26. Angular directive for a fallback image
  27. angularjs text area character counter
  28. ng-click doesn’t work within the template of a directive
  29. creating a new directive with angularjs
  30. AngularJS – Directives vs Controllers

Leave a Comment