How to use the 'replace' feature for custom AngularJS directives?


Answers

replace:true is Deprecated

From the Docs:

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

specify what the template should replace. Defaults to false.

  • true - the template will replace the directive's element.
  • false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API

From GitHub:

Caitp-- It's deprecated because there are known, very silly problems with replace: true, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it".

-- AngularJS Issue #7636

Question

This question already has an answer here:

Why does replace=true or replace=false not have any impact in the code below?

Why isn't the "some existing content" being displayed when replace=false?

Or putting it more humbly, can you kindly explain what is the replace=true/false feature in directives and how to use it?

Example

JS/Angular:

<script>
    angular.module('scopes', [])
          .controller('Ctrl', function($scope) {
                $scope.title = "hello";

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

HTML:

<div ng-controller="Ctrl">
    <my-dir><h3>some existing content</h3></my-dir>
</div>

See it in Plunker here:

http://plnkr.co/edit/4ywZGwfsKHLAoGL38vvW?p=preview




Links