How to use `replace` of directive definition?

by

You are getting confused with transclude: true, which would append the inner content.

replace: true means that the content of the directive template will replace the element that the directive is declared on, in this case the <div myd1> tag.

http://plnkr.co/edit/k9qSx15fhSZRMwgAIMP4?p=preview

For example without replace:true

<div myd1><span class="replaced" myd1="">directive template1</span></div>

and with replace:true

<span class="replaced" myd1="">directive template1</span>

As you can see in the latter example, the div tag is indeed replaced.

More Related Contents:

  1. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  2. How to access parent scope from within a custom directive *with own scope* in AngularJS?
  3. How can I dynamically add a directive in AngularJS?
  4. 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?
  5. How to select an element by classname using jqLite?
  6. AngularJS ng-style with a conditional expression
  7. Confused about Angularjs transcluded and isolate scopes & bindings
  8. Rendering directives within $sce.trustAsHtml
  9. How to allow only a number (digits and decimal point) to be typed in an input?
  10. How to autocapitalize the first character in an input field in AngularJS?
  11. Angular directive how to add an attribute to the element?
  12. get original element from ng-click
  13. How can I test events in angular?
  14. AngularJS : ng-repeat filter when value is greater than
  15. angularjs share data config between controllers
  16. AngularJS Group By Directive without External Dependencies
  17. AngularJS watch DOM change
  18. How do I apply an AngularJS directive based on a class set by ng-class?
  19. $apply vs $digest in directive testing
  20. How to use “ng-repeat” within template of a directive in Angular JS?
  21. When to use the AngularJS `$onInit` Life-Cycle Hook
  22. AngularJS – how to override directive ngClick
  23. Bind class toggle to window scroll event
  24. Angular adds strange options into select element when setting model value
  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