CODEWITHSUNDEEP
angularjs
Samantha J T Star
Samantha J T Star

Reputation: 32808

How can I make a directive replace everything inside a DIV including the DIV itself?

I am using the following directive call:

<div data-my-activity></div>

Here's the directive:

app.directive('myActivity', function () {
    return {
        restrict: "A",
        template: "<div class='activity-mask' data-ng-show='fetching.length > 0' >" +
        "<ul>" +
        "<li data-ng-repeat='activity in fetching'>{{ activity }}</li>" +
        "</ul>" +
        "</div>" +
        "<div class='activity-mask' data-ng-show='loading.length > 0' >" +
        "<ul>" +
        "<li data-ng-repeat='activity in loading'>{{ activity }}</li>" +
        "</ul>" +
        "</div>"
    };
});

When I use this directive it gives me:

<div data-my-activity="">
   <div class="activity-mask ng-hide" 
        data-ng-show="fetching.length &gt; 0">
      <ul><!-- ngRepeat: activity in fetching --></ul>
   </div>
   <div class="activity-mask ng-hide" 
        data-ng-show="loading.length &gt; 0">
      <ul><!-- ngRepeat: activity in loading --></ul>
   </div>
</div>

Is there a way I can make this give me the following if fetching.length and loading.length are both equal to 0 ?

<div style="display:none">
   <div class="activity-mask ng-hide" 
        data-ng-show="fetching.length &gt; 0">
      <ul><!-- ngRepeat: activity in fetching --></ul>
   </div>
   <div class="activity-mask ng-hide" 
        data-ng-show="loading.length &gt; 0">
      <ul><!-- ngRepeat: activity in loading --></ul>
   </div>
</div>

and the following if fetching.length or loading.length are not equal to 0 ?

<div style="display:block">>
   <div class="activity-mask ng-hide" 
        data-ng-show="fetching.length &gt; 0">
      <ul><!-- ngRepeat: activity in fetching --></ul>
   </div>
   <div class="activity-mask ng-hide" 
        data-ng-show="loading.length &gt; 0">
      <ul><!-- ngRepeat: activity in loading --></ul>
   </div>
</div>

Update:

I tried the proposed answer but it gives me problems with the quote marks as I have three levels of quotes on the one line.

app.directive('myActivity', function () {
    return {
        restrict: "A",
        replace: true,
        template: "<div ng-style="{display: loading.length > 0 || fetching.length > 0 ? 'block' : 'none'}">
        "<ul>" +
        "<li data-ng-repeat='activity in fetching'>{{ activity }}</li>" +
        "</ul>" +
        "</div>" +
        "<div class='activity-mask' data-ng-show='loading.length > 0' >" +
        "<ul>" +
        "<li data-ng-repeat='activity in loading'>{{ activity }}</li>" +
        "</ul>" +
        "</div>" +
        "</div>"
    };
});

Upvotes: 0

Views: 1396

Answers (1)

Michal Charemza
Michal Charemza

Reputation: 27012

You should be able to pass the option

replace: true

into the directive, and the template specified will replace all of the html of the element, including the element itself

app.directive('myActivity', function () {
  return {
    restrict: "A",
    replace: true,
    template: "..."
  };
});

Edit: To then show/hide the contents dynamically, you should be able to set display:none template using ngStyle

template: '<div ng-style="{display: loading.length > 0 || fetching.length > 0 ? 'block' : 'none'}">....';

Alternatively, you could do an ngIf you don't actually need the elements in the DOM

template: '<div ng-if="loading.length > 0 || fetching.length > 0">....';

Edit: I had ngShow where I actually meant ngIf

Upvotes: 4

Related Questions