How to avoid rendering directive element

Question

Is it possible to hide my directive html element? I mean if I have this directive:

app.js

angular.module("myApp", [])
    .directive("myDirective", function() {
        return {
            restrict: "E",
            template: "<div><p>Some text...</p></div>"
    }
);

Only render the content of the template.

<div>
    <p>Some text...</p>
</div>

Not the directives element:

<my-directive>
    <div>
        <p>Some text...</p>
    </div>
</my-directive>

score 2 · Accepted Answer · answered Jun 07 '17 at 15:49

yes just put the replace: true in the directive. it will remove the element

angular.module("myApp", [])
    .directive("myDirective", function() {
        return {
            restrict: "E",
            template: "<div><p>Some text...</p></div>",
            replace: true
    }
);

Demo

angular.module("app",[])
.controller("ctrl",function($scope){


}).directive("myDirective", function() {
        return {
            restrict: "E",
            template: "<div><p>Some text...</p></div>",
            replace : true
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <my-directive> 
</my-directive>
</div>

score 1 · Answer 2 · answered Jun 07 '17 at 19:35

1

Note that replace: true is marked as deprecated (I use it myself nonetheless from time to time)

See: Explain replace=true in Angular Directives (Deprecated)

answered Jun 07 '17 at 19:35

flyer

1,414
12
13

How to avoid rendering directive element

2 Answers2